CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
igor treptau
igor treptau

Reputation: 33

HTML fit image to parent's parent

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.

Upvotes: 0

Views: 148

Answers (2)

Ori Drori
Ori Drori

Reputation: 191936

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

Upvotes: 1

Arjun
Arjun

Reputation: 236

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

Upvotes: 0

Related Questions