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

我有一个固定大小div的网格，这必须保持CSS。 在每个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时，这也不起作用。

代码>宽度：100%和<代码>高度：自动（或者

height:auto！important；

如果img元素上有height属性）通常会起作用

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

---

对不起，误读了这个问题，这修复了纵横比，但没有定心。可能会给出一些有价值的想法。

这里的问题是块高度未知

以下是一个适用于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>

html

向我们展示您迄今为止尝试过的代码。如果我没有为div设置高度，这将起作用。当图像具有长高度（纵向）时，使用此选项可使图像跳出div。是的，没错。我已经解决了使用

溢出：隐藏在过去，但这不是一个很好的解决方案，因为它会“裁剪”图像。但这可能会阻止破坏布局。使用此样式在Chrome中进行测试会显示平铺高度被忽略。此外，它会忽略栅格，所有瓷砖形成一个柱。我已经找到了一个使用溢出：auto、float:left和position:absolute的解决方案。我仍然无法修复垂直对齐。
<div id="holder">

    <div class="tile">

        <div class="tileInner">

                <img src="imageUrl"/>

        </div>

    </div>

</div>