CODEWITHSUNDEEP
htmlwidthcss
Alfonso
Alfonso

Reputation: 2296

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

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?

Upvotes: 182

Views: 436306

Answers (12)

Andrei Ardelean
Andrei Ardelean

Reputation: 125

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

Upvotes: 1

Mehdi Hajatpour
Mehdi Hajatpour

Reputation: 31

I wrote this code:

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

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

Upvotes: 1

DevDave
DevDave

Reputation: 6888

I found max-width:inherit; worked for me

Upvotes: 1

Michael Nelles
Michael Nelles

Reputation: 5992

In line style - this works for me every time

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

Upvotes: 2

Scription
Scription

Reputation: 645

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

Full Width Containers in Limited Width Parents

Upvotes: 0

Noah Franco
Noah Franco

Reputation: 145

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;
 }

Upvotes: 0

Combine
Combine

Reputation: 4214

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*/

Upvotes: 0

Amanda
Amanda

Reputation: 41

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.

Upvotes: 4

ALLSYED
ALLSYED

Reputation: 1553

I would use the property display: table-cell

Here is the link

Upvotes: -5

SandroMarques
SandroMarques

Reputation: 6534

If the image is smaller than parent...

.img_100 {
  width: 100%;
}

Upvotes: -1

mattauckland
mattauckland

Reputation: 503

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).

Upvotes: 13

Fyodor Soikin
Fyodor Soikin

Reputation: 80714

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

Upvotes: 299

Related Questions