Question

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

Answer 1

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

抱歉误读了这个问题，这解决了宽高比而不是居中。 This tread可能会提供一些有价值的想法。

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

Answer 3

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

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

3 个答案: