fun*_*err 2 css image image-scaling
我如何创建一个流畅的图像,但我决定使用宽高比？(比方说16:9)
我已经把它变得流畅max-width: 100%;但我不能改变宽高比.
注意:图像在大多数情况下具有不同的宽高比.
您可以将图像包装在两个容器中.给一个容器height:0和一个padding-top具有所需百分比的图像高度与宽度成比例.因此,对于宽度采用50%的高度padding-top:50%和height:0,其中-作为解释这里 -将使高度成正比的宽度的50%.
.wrapper {padding-top:50%;height:0;position:relative;}
在该容器内部,您可以使用以下样式放置另一个容器:
.inner{position:absolute;left:0;top:0;right:0;bottom:0;}
现在只需将您的图像放在内部容器中并给它width:100%和height:100%
请参阅小提琴:http://jsfiddle.net/henrikandersson/PREUD/1/ (更新小提琴)