css - 网格 CSS，固定大小 div 内的图像，仅使用 css 保持纵横比

Question

我有一个固定大小的 div 网格，这必须保持 CSS-only。在每个 div 里面，我有一个随机大小的图像。

我需要图像在保持纵横比的同时缩放到 div 大小，并且还需要在 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%;
  }

不能垂直居中。其他一切似乎都很好。

更新：当 img 小于 div 时，这也不起作用。

Answer 1

#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>

Answer 2

width: 100%;和height: auto;（或者height: auto !important;如果 img 元素上有一个 height 属性）通常可以解决问题。

抱歉误读了这个问题，这修复了纵横比而不是居中。这个步骤可能会提供一些有价值的想法。

Answer 3

这里的问题是块高度是未知的。

这是适用于 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%;
}

使用这个 html 模板：

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