Help with responsive image

HTML & CSS
1

The header image that appears via desktop looks good, but the mobile view of the same image looks vertically compressed. So, I tried this without success:

<img src="/images/headerM.jpg" srcset="images/header.jpg 864w" alt="">

By ‘without success’ I mean no change to the compressed mobile view with this code.

headerM.jpg is the image I’d like to appear in the mobile view and is less wide than header.jpg.

header.jpg appears successfully in the desktop view with this code.

How can I keep header.jpg appearing successfully in the desktop view and have headerM.jpg appear in mobile view?

2

Supplying actual source or a link to a web page would make it easier to suggest solutions :slight_smile:

The following two links may be useful"

"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

"https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Instead of hard-coding an images width and/or height I prefer to set the following CSS:

 img {width:100%; height:auto;}

The idea is to get the image to expand to fill the parent container.

3

That means you are squashing it in some way. You can’t change an image’s width without maintaining the aspect ratio of the height (or vice versa). As John said above you would usually set your image to max-width:100% (or width:100% depending on use case) and height:auto in order to maintain aspect ratio.

If you are simply scaling width and height then the aspect ratio would be broken (although you could use object-fit:cover to maintain aspect ratio but that will mean the image is cropped to fit the container).

Without seeing a working demo we can only offer basic advice as there may indeed but some other causes affecting the image size (in a flex container perhaps).

4

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