html - 如何构图100％宽度的图像锁定比率？

我希望有一个显示在16：9比例框架内的100％宽度的图像。图像应在框架内居中，并应响应屏幕调整大小。理想情况下，我希望仅使用CSS就能做到这一点。

最佳答案

结合多个SO答案，我可以使用以下样式使其工作。框架的尺寸在.grid_6中设置为100％宽度，在.grid_6 :: after中设置为56.25％高度。

JS小提琴：http://jsfiddle.net/stroz/fz2ez4uv/2/

的HTML

<div class="thumb grid_6">
    <img src="http://placekitten.com/g/200/300" />
</div>

的CSS

.grid_6 {
    width: 100%;
    overflow:hidden;
    position:relative;
}

.grid_6::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: '';
}

.thumb img {
    display: block;
    width:100%;
    height:auto;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

此解决方案结合了以下问题中概述的方法：

How to keep image aspect ratio inside a %width div?

Scale a div to fit in window but preserve aspect ratio

关于html - 如何构图100％宽度的图像锁定比率？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28183106/