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

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

Answer 2

In line style - this works for me every time

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

Answer 3

If the image is smaller than parent...

.img_100 {
  width: 100%;
}