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

user_411967 0
Viewed 350535

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?

css width html
11 Answers

In line style - this works for me every time

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

I wrote this code:

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

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

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

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

I found max-width:inherit; worked for me

user_8966310
Related