Css改变流体图像的纵横比

Question

我如何创建一个流畅的图像，但宽高比由我决定？ (比方说 16:9)
我已经使用 max-width: 100%; 使其流畅，但我无法更改纵横比。

注意:大多数情况下图像的纵横比不同。

Answer 1

您可以将图像包装在两个容器中。给一个容器 height:0 和一个 padding-top，其中包含您希望图像高度与宽度成比例的百分比。因此，对于宽度的 50% 的高度，使用 padding-top:50% 和 height:0，如 here 所述- 将使高度与宽度成比例 50%。

.wrapper {padding-top:50%;height:0;position:relative;}

在该容器内，您放置另一个具有以下样式的容器:

.inner{position:absolute;left:0;top:0;right:0;bottom:0;}

现在只需将您的图像放在内部容器中并为其指定 width:100% 和 height:100%

参见 fiddle :http://jsfiddle.net/henrikandersson/PREUD/1/(更新了 fiddle )