responsive img question & a max width

[r_tist]

Hi,

If I have the standard responsive attribute applied to images with this class name... what happens when in certain cases I need to ensure the image has set dimensions, but can most certainly downscale. I just don't want it huge within the space its presented in. A little more control:

<img class="pics" src="/images/myPhoto.jpg" alt="description" style="width:277px;height:204px;"/>

.pics {

    width: 100%;

    height: auto;

}

Would I create another class, and add a max-width?

Thank you.

[Jon Fritz · Accepted solution]

Use max-width for that.

Remove the inline style width/height, that shouldn't be there. Inline styles are messy and will overwrite whatever you have in the .css file or <style> tag.

Right now, in your example, if the .pics class were in the <style> or in an external .css file, the width:100% is overwritten by the inline setting of width:277px.

If you never want your image to go beyond a set size, make that set size the actual dimension of the image, then use max-width:100% in the the image class. That will allow the image to grow up to the natural image dimensions with no need to explicitly state them in the html or css. The image would also then shrink with its responsive parent container.

[r_tist]

Yes, I tried it immediately after posting my query just to test, and it worked perfectly!

Yes, the images were at a set size to begin with as well.

Thanks!

[Andy_Baz]

Using max-width and min-width you can achieve what you desire.

If you require the images to be different scales for different devices the you may want to add some @media rules too for further control.