Skip to main content
R
r_tist
Inspiring
October 6, 2017
Answered

responsive img question & a max width

  • October 6, 2017
  • 2 replies
  • 719 views

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.

    This topic has been closed for replies.
    Correct answer Jon Fritz

    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.

    2 replies

    A
    Andy_Baz
    Inspiring
    October 6, 2017

    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.

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    October 6, 2017

    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
    r_tistAuthor
    Inspiring
    October 6, 2017

    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!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices