How to handle responsiveness of an image ?
Hello,
I'm trying to handle the display of an image on the hero section of a website. It's a simple two column layout, with text and CTA on left, and an image on the right (for laptop and desktop) and a one column layout for mobile and tablet with title - CTA - image. I would like my image to grow proportionnaly to the resolution, but I don't know how to do it ?
For mobile I have this for the moment (cf image). I have a max-height on the image. So the problem is for tablet my image isn't the biggest it could be
Do you guys have any bullets point on how to work with image and responsive ? Or any useful resources ?
Thanks in advance 🙂
6 Replies
In every css-reset you’ll find
img {
Max-width:100%;
Display : block
}
Then the image will scale with its containerMy image is cut if I do that
Because I have an object-fit of cover
but if I remove me it's diform my image
and if I set object-fit: contain it's really small ..
@Ozzo share your code if you want to go into details about your specific design, something like codepen works best. You can use a placeholder image site like https://picsum.photos for any images
I deployed my website https://driving-school-template-u8kh.vercel.app/ (a codepen is a bit complicated it's a next.js app)
Template Next.js
Template to create next.js app with ccommons features quickly