我想要保持一个特定的
宽高比,其中高度是固定的。过去我已经这样做了,但只有在使用固定宽度时才能实现:
那么,这就是我在这个例子中使用100%固定宽度的方式。但是,这一次我想制作一个iPhone模型,其中高度固定为100%,比例为4:7(4w:7h)。使用固定高度,我可以设置高度为100%和最大高度为100%,这样它就不会溢出页面,同时仍然保持4:7的比例。那么,有人知道如何做到这一点吗?无论是使用此方法还是其他方法。
.one-one {
position: relative;
}
.one-one:before {
display: block;
content: " ";
width: 100%;
padding-top: 56.25%;
/* Ratio of 16:9 (16w:9h)
* (h / w) * 100 = %
* (9 / 16) * 100 = %
* 0.5625 * 100 = 56.25%
* 1:1 = 100%
*/
}
那么,这就是我在这个例子中使用100%固定宽度的方式。但是,这一次我想制作一个iPhone模型,其中高度固定为100%,比例为4:7(4w:7h)。使用固定高度,我可以设置高度为100%和最大高度为100%,这样它就不会溢出页面,同时仍然保持4:7的比例。那么,有人知道如何做到这一点吗?无论是使用此方法还是其他方法。
感谢任何帮助!
100vh
之类的方法,因为每次我使用它时,总会遇到一堆无法正常工作的设备或浏览器。 - germainelol