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

Answer 1

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

Answer 2

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

Full Width Containers in Limited Width Parents

Answer 3

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

Answer 4

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

Answer 5

I would use the property display: table-cell

Here is the link

Answer 6

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.