Highlighted

responsive img question & a max width

Enthusiast ,
Oct 06, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

301

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

responsive img question & a max width

Enthusiast ,
Oct 06, 2017

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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.

Views

302

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 06, 2017 0
Adobe Community Professional ,
Oct 06, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
r_tist LATEST
Enthusiast ,
Oct 06, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0
Contributor ,
Oct 06, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 06, 2017 0