Html CSS:如何使用大众和vh以16/9的比例制作div?
我有以下设置:Html CSS:如何使用大众和vh以16/9的比例制作div?,html,css,Html,Css,我有以下设置: #容器{ 宽度:100vw; 高度:计算值(100vw/1.77); 显示:块; 背景色:黑色; } #容器{ 显示:块; 宽度:100vw; 最大宽度:177.78vh; /* 16/9 = 1.778 */ 身高:56.25vw; /*高宽比=9/16=.5625*/ 最大高度:100vh; 背景色:黑色; } 这里有一个Sass混音,它稍微简化了数学 @mixin aspect-ratio($width, $height) { position: relative
#容器{
宽度:100vw;
高度:计算值(100vw/1.77);
显示:块;
背景色:黑色;
}
#容器{
显示:块;
宽度:100vw;
最大宽度:177.78vh;
/* 16/9 = 1.778 */
身高:56.25vw;
/*高宽比=9/16=.5625*/
最大高度:100vh;
背景色:黑色;
}
这里有一个Sass混音,它稍微简化了数学
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
mixin假设您将在初始块中嵌套一个元素和内容类。像这样:
<div class="sixteen-nine">
<div class="content">
insert content here
this will maintain a 16:9 aspect ratio
</div>
</div>
结果:
.sixteen-nine {
position: relative;
}
.sixteen-nine:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%;
}
.sixteen-nine > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
定义“它不起作用”。谢谢,它起作用了。
.sixteen-nine {
position: relative;
}
.sixteen-nine:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%;
}
.sixteen-nine > .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}