Hello,
I’m tweaking my style between desktop and mobile.
My image exceeds the tablet screen size.
How can I accommodate an image inside tablet/mobile screen?
thank you
Hello,
I’m tweaking my style between desktop and mobile.
My image exceeds the tablet screen size.
How can I accommodate an image inside tablet/mobile screen?
thank you
Hi @aym
Welcome to the forum
All the settings you gave to the image are preventing it from being responsive as it naturally is.
You can either give it with on each breakpoint (e.g. 100%), or remove all the max-width / min-width properties. In both these cases your image will be responsive.
Hi @avivtech
Thank you so much for your help.
You are right and I could make it responsive by setting 100% and removing max/min width.
However, what I want to achieve is to show half part of image in tablet screen. Is it possible?
What I want
And it looks like this now
of course
You need to put the image in a div with overflow:hidden
and the right dimentions, the position them both as you wish.
https://www.loom.com/share/346fc82412da415289881b189898860b
btw - dont use 100% on all the size properties. Once you give 100% width, all the other % are useless. Read here about it.
p.s. images max-width is automatically set to 100%. If you want the image to be larger then it’s parent, set it to more then 100% .
thank you so much! you are right.
video is very helpful