CODEWITHSUNDEEP
htmlimageresponsive-design
Ben S
Ben S

Reputation: 51

Responsive image in HTML with max width/height and without CSS

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.

Upvotes: 4

Views: 31341

Answers (2)

CPBL
CPBL

Reputation: 4030

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.

Upvotes: 1

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

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.

Upvotes: 5

Related Questions