HTML适合父母的父母的形象

Question

I want to fit an image inside some divs and make it as big as possible without changing the aspect ratio. Setting max-height and max-width to 100% on both the image and its parent does not work and the image overflows (I guess because the parent does not really have a width or height so the image can not resize to it?).

JSFiddle

<div class="block">
  <div class="row">
    <div class="col-xs-9">
      <div class="thumbnail">
        <img class="placeholder" src="https://unsplash.it/900/600" alt="">
      </div>
    </div>
    <div class="col-xs-3">
    </div>
  </div>
</div>

Edit:
I will clarify what I really want to achieve later this evening when I have time to write.

Answer 1

Set the the image as background image to .thumbnail , and constrict it's size using background-size ( demo ):

.thumbnail {
  display: inline-block;
  margin: 0;
  height: 100%;
  width: 100%;
  background: url("https://unsplash.it/900/600") no-repeat;
  background-size: contain;
}

Answer 2

If you want the parent div to match its content, add display:table; in your "outline-block" css class.

Fiddle

Similar post on stack overflow: how-do-i-auto-resize-an-image-to-fit-a-div-container