Trouble with Responsive Image Sizing in CSS

HTML & CSS
1

Hello SitePoint Community,

I’ve encountered a challenge that I’m hoping to get some advice on. I’m working on a website where I need images to be responsive and adapt to different screen sizes. The problem is, while the images resize correctly on desktop browsers, they don’t seem to respond the same way on mobile devices. Instead of scaling down, the images overflow the container, causing layout issues.

Here’s a snippet of the CSS I’m using:

cssCopy code

.img-responsive {
    width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

I expected the .img-responsive class to ensure the images scale down on smaller screens, but it’s not working as intended on mobile. I’ve checked to make sure there’s no overriding CSS elsewhere.

Am I missing something obvious here? Could it be an issue with the way the container is defined, or is there something else I should consider for mobile responsiveness?

Any tips or suggestions would be greatly appreciated!

1 Like
2

Assuming that in your HTML the img-responsive class is applied to the image, and the container class is applied to the image’s containing element, I don’t see why it should not work.

Do you have the correct viewport meta tag in the page head?

2 Likes
3

Try…

.img-responsive {
    display: block;
    width: 100%;
    height: auto;
}
4

Sure, let me try it!

5

If someone need a link to check for a website, please refer. I don’t know why google website speed testing shows most images taking more resources.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.