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

【问题标题】：Grid CSS, Image inside fixed-size div, keep aspect ratio using css-only网格 CSS，固定大小 div 内的图像，仅使用 css 保持纵横比
【发布时间】：2012-10-28 17:55:17
【问题描述】：

我有一个固定大小的 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 时，这也不起作用。

【问题讨论】：

向我们展示您迄今为止尝试过的代码。

标签： css image grid

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

Chrome 中的测试显示使用此样式会忽略平铺高度。此外，它忽略了网格，所有图块形成一列。我找到了使用溢出的解决方案：自动，浮动：左和位置：绝对。我仍然无法修复垂直对齐方式。

【解决方案3】：

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

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

【讨论】：

如果我没有为 div 设置高度，这将起作用。当图片高度长（人像）时，使用this会使图片跳出div。
是的，没错。我过去使用overflow: hidden; 解决了这个问题，但这不是一个很好的解决方案，因为它“裁剪”了图像。不过，它可能会阻止破坏布局。