Grid CSS, Image inside fixed-size div, keep aspect ratio using css-only

Question

I have a grid of fixed size divs, and this must remain CSS-only. Inside each div, I have a random size image inside.

I need the image to scale to the div size while keeping the aspect ratio, and also be centered both horizontally and vertically within the div.

  #holder {
    width: 800px;
    margin: 0 auto;
  }
  .tile {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid black;
    text-align: center;
    /*vertical-align: middle;*/
    width: 300px;
    height: 300px;
  }
  .tile img {
    /*vertical-align: middle;*/
    outline: 1px dashed red;
    max-height:100%;
    max-width:100%;
  }

Can't center vertically. Everything else seems to work fine.

UPDATE: Also this doesn't work when the img is smaller than the div.

Show us the code you have tried so far. – Lowkase Nov 08 '12 at 14:24 — Lowkase, Nov 08 '12 at 14:24

score 0 · Answer 1 · edited May 23 '17 at 11:48

0

width: 100%; and height: auto; (or height: auto !important; in case there is a height attribute on the img element) usually does the trick.

Sorry misread the question, this fixes the aspect ratio but not the centering. This tread might give some valuable ideas.

edited May 23 '17 at 11:48

Community

1
1

answered Nov 08 '12 at 14:31

Simon

3,667
1
35
49

This would work if I didn't have a height set for the div. When the image has long height (portrait), using this makes the image jump out of the div. – mlg Nov 08 '12 at 14:34
Yes, that's right. I have solved that using `overflow: hidden;` in the past, but that's not a very good solution since it "crops" the image. It might prevent breaking the layout though. – Simon Nov 08 '12 at 14:38

score 0 · Answer 2 · answered Nov 08 '12 at 15:26

The problem here is that the block height is unknown.

Here's a solution that work on firefox/chrome:

#holder {
    width: 800px;
    margin: 0 auto;
}
.tile {
    padding: 10px 15px;
    border: 1px solid black;
    width: 300px;
    height: 300px;
    display: table;
}
.tile-layout {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.tile img {
    outline: 1px dashed red;
    width:100%;
}

Using this html template:

 <div id="holder">
      <div class="tile">
           <div class="tile-layout">
                <img src="{{ img }}"/>
           </div>
      </div>
 </div>

Test in Chrome reveals tile height gets ignored using this styling. Also, it ignores the grid, all tiles form a single column. I've found a solution using overflow: auto, float: left and position: absolute. I still couldn't fix the vertical alignment. — mlg, Nov 08 '12 at 23:33

score 0 · Answer 3 · answered Nov 20 '12 at 09:18

#holder {

    display:table;
    width: 800px;
    margin: 0 auto;
    height:100%;
    possition:relative;

}

.tile {

    display: table-cell;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;

}

.tileInner{

    display:block;
    width: 300px;
    height: 300px;
    padding: 10px 15px;

}

.tile img {
    display:table-cell;
    vertical-align: middle;
    outline: 1px dashed red;
    max-height:100%;
    max-width:100%;

}

html

<div id="holder">

    <div class="tile">

        <div class="tileInner">

                <img src="imageUrl"/>

        </div>

    </div>

</div>

Grid CSS, Image inside fixed-size div, keep aspect ratio using css-only

3 Answers3