Make an image width 100% of parent div, but not bigger than its own width

Question

I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:

img {
    width: 100%;
    height: auto;
    max-width: 100%;
}

Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?

@Fyodor Soikin - Give that as an answer and I'll vote for you. — Gert Grenander, Aug 11 '10 at 23:41
It would be well to consider which browsers support max-width, though. — kbrimington, Aug 11 '10 at 23:45
kbrimington does bring a good point to the table. According to http://reference.sitepoint.com/css/max-width#compatibilitysection IE8’s implementation is buggy. — Alfonso, Aug 12 '10 at 00:07

score 289 · Accepted Answer · answered Aug 11 '10 at 23:47

289

Just specify max-width: 100% alone, that should do it.

answered Aug 11 '10 at 23:47

Fyodor Soikin

78,590
9
125
172

1

Chromium seems to simply leave it at 100% regardless of context. Perhaps I should stop constantly looking at my work on beta software. Thank you! – Alfonso Aug 11 '10 at 23:59
How do you do this without using max-width: 100%. In React-Native, it's not possible to use percentages. – Croolsby Dec 11 '18 at 19:33
1

@Croolsby you can use percentage in react-native, but with string value, like this '100%' – Rafael Hovsepyan Dec 19 '19 at 11:43

mattauckland · Answer 2 · 2013-03-06T14:10:02.527

Found this post on a Google search, and it solved my issue thanks to @jwal reply, but I made one addition to his solution.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width - padding - boarder = max width

This way my image won't break out of the containing div, and I can still float the image within the content div.

I've tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.

Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).

Using `width:auto !important;` fixed an issue in IE11 for me where the image would be larger than its container and IE11 not scaling down the image. Setting this in the `img` selector sorted the issue in IE11. However setting `width:100%;` without the other rule did nothing in IE11. So the "override" has to be included for the image to scale down to its container's size. — lowtechsun, Feb 08 '17 at 22:08

score 3 · Answer 3 · edited Oct 14 '17 at 09:42

3

Setting a width of 100% is the full width of the div it's in, not the original full-sized image. There is no way to do that without JavaScript or some other scripting language that can measure the image. If you can have a fixed width or fixed height of the div (like 200px wide) then it shouldn't be too hard to give the image a range to fill. But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted.

edited Oct 14 '17 at 09:42

Prakash Pazhanisamy

997
1
15
25

answered Jul 17 '12 at 16:46

Amanda

31
1

1

please provide a working example whenever possible. [This](http://jsfiddle.net/) is recommended. :) – bhb Oct 11 '12 at 06:34

score 3 · Answer 4 · answered Jan 16 '20 at 18:15

3

In line style - this works for me every time

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

answered Jan 16 '20 at 18:15

Michael Nelles

5,426
8
41
57

score 1 · Answer 5 · answered Dec 04 '21 at 13:02

1

I wrote this code:

div.image {
   height: auto;
   width: 100%;
}

div.image img {
    height: inherit;
    width: inherit;
}

answered Dec 04 '21 at 13:02

Mehdi Hajatpour

31
7

score 0 · Answer 6 · answered Jul 31 '18 at 10:46

You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

score 0 · Answer 7 · edited Mar 29 '19 at 13:17

0

I was also having the same problem, but I set the height value in my CSS to auto and that fixed my problem. Also, don't forget to do the display property.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }

edited Mar 29 '19 at 13:17

Yugandhar Chaudhari

3,831
3
24
40

answered Mar 29 '19 at 11:50

Noah Franco

139
1
6

just a fyi..you can remove the height:auto and width:auto. the max-height and max-width is the same thing. – Debbie Kurth Sep 24 '19 at 20:53

score 0 · Answer 8 · answered Oct 27 '19 at 08:58

0

I found an answer which worked for me and can be found in the following link:

Full Width Containers in Limited Width Parents

answered Oct 27 '19 at 08:58

Scription

646
3
12
21

score 0 · Answer 9 · answered Jun 03 '21 at 06:52

0

I found max-width:inherit; worked for me

answered Jun 03 '21 at 06:52

DevDave

6,700
12
65
99

score 0 · Answer 10 · edited Dec 22 '22 at 21:50

0

max-width: fit-content; worked for me.

edited Dec 22 '22 at 21:50

Kevin M. Mansour

2,915
6
18
35

answered Dec 22 '22 at 00:10

Andrei Ardelean

105
1
1
6

score -1 · Answer 11 · answered Dec 09 '16 at 14:32

-1

If the image is smaller than parent...

.img_100 {
  width: 100%;
}

answered Dec 09 '16 at 14:32

SandroMarques

6,070
1
41
46

score -5 · Answer 12 · answered Mar 22 '17 at 05:01

-5

I would use the property display: table-cell

Here is the link

answered Mar 22 '17 at 05:01

ALLSYED

1,523
17
15

Make an image width 100% of parent div, but not bigger than its own width

12 Answers12

Linked

Related