4

Is there a way to add an in-line image using HTML that is responsive but has a max width?

I know that I can use <img width="100%" /> to make it responsive, but this results in the image resizing to the container size, and I want to set a max width/size for it.

Is this possible? The reason I don't want to do it using CSS is because in this instance I can't edit the master/parent CSS and would rather not use in-line CSS.

Thanks.

5
  • 1
    Nope. CSS is what provides 'responsive' capabilities
    – MaggsWeb
    Jul 29, 2015 at 16:13
  • You could attempt to use inline styling and use the keyword !important, that may over write the CSS rules
    – Canvas
    Jul 29, 2015 at 16:14
  • you can set max-width to the container of the img Jul 29, 2015 at 16:19
  • 1
    <img style="max-width:100%;">
    – Aibrean
    Jul 29, 2015 at 16:41
  • Thanks for the responses. Using <img style="max-width:100%;"> works as long as the actual size of the image is not larger than I want it to appear on desktop/larger screens, so that's what I'm going to do.
    – Ben S
    Jul 30, 2015 at 14:35

2 Answers 2

4

If you are not looking to set the percentage, then use this:

<img style="max-width: 200px;">

However I like to set it like this:

<img style="max-width: calc(100% - 20px);">

this way you can set the img to certain px smaller than its container. either one will work.

1

My most common need for intelligently choosing width would be to size something to 100% unless that gets too big. For example, specify both width and max-width:

<img src="myimage.png" style="max-width:1000px; width:100%;">

That is inline-CSS, which the original question states is not desired; however, the OP then chose a solution which was inline CSS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.