HTML fit image to parent's parent

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.

score 1 · Answer 1 · answered Aug 22 '16 at 17:22

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

score 0 · Answer 2 · edited May 23 '17 at 12:08

0

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

edited May 23 '17 at 12:08

Community

1
1

answered Aug 22 '16 at 17:04

Arjun

226
5
20

This sets the "block"s height to the image but I want the image to fit inside "block" without overflowing. – igor treptau Aug 22 '16 at 17:11
@igortreptau I have updated the code here: [link](http://fiddle.jshell.net/cgj58gL0/3/) (applied `css` directly on `img` tag) – Arjun Aug 22 '16 at 17:14
I think @Ori Drori 's answer is what you are looking for! – Arjun Aug 22 '16 at 17:38

HTML fit image to parent's parent

2 Answers2