Css改变流体图像的纵横比 [英] Css changing aspect ratio of fluid images

问题描述

如何创建一个流体图像，但我有一个宽高比，我决定？ （让我们说16：9）

我已经使它流动与 max-width：100％; 但我不能改变宽高比。

How can I crate a fluid image, but with an aspect ratio that I decide? (lets say 16:9)
I've already made it fluid with max-width: 100%; but I cant change the aspect ratio.

注意：图片大多数时候都有不同的宽高比。

Note: the image has a different aspect ratio most of the times.

推荐答案

您可以在两个容器中封装您的图片。给一个容器高度：0和一个padding-top，你想要的图像的高度的百分比与宽度成比例。所以，对于一个高度的50％的宽度使用padding-top：50％和height：0，其中 - 此处将使高度与宽度成比例50％。

You can wrapp your image in two containers. Give one container height:0 and a padding-top with the percentage you want for the height of your image in proportion to the width. So, for a height of 50% of the width use padding-top:50% and height:0, which - as explained here - will make the height proportional to the width by 50%.

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

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

Inside of that container, you place another container with the following styling:

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

$ b b

现在只需将图片放在内部容器中，并将其宽度设为100％，高度：100％。

Now just place your image in the inner container and give it width:100% and height:100%

请参阅fiddle：http://jsfiddle.net/henrikandersson/PREUD/1/
（更新小提琴）

See fiddle: http://jsfiddle.net/henrikandersson/PREUD/1/ (updated the fiddle)

这篇关于Css改变流体图像的纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！