是否可以使用 CSS calc() 来计算 width/height 比率?
Is it possible to use CSS calc() in order to calculate an width/height ratio?
这是我目前拥有的代码(目前还不能使用):
HTML:
<div class="chi_display_header" style="background-image:url('http://localhost/.../header-dummy-small.png');"></div>
CSS:
.chi_display_header {
background-size:contain;
width:100%;
min-height:100px;
height:calc(1vw * 270 / 1280px);
max-height:270px;
max-width:1280px;
margin:0 auto;
}
这是居中的响应式背景图片 - 容器的宽度/高度应该可变,我不想使用 jQuery。
已知属性:
Ratio: 1280:270
Minimum height: 100px
Maximum height: 270px
Maximum width: 1280px
我尝试做的是用 calc 神奇地计算 .chi_display_header 的容器高度:
height = calc( CURRENT_SCREEN_WIDTH * 270 / 1280);
但是我目前的做法
height:calc(1vw * 270 / 1280px);
还没有工作。有CSS解决方案吗?
解决方案(共 4 条评论):
.chi_display_header {
background-size:cover;
width:100%;
min-height:100px;
height:calc(100vw * 270.0 / 1280.0);
max-height:270px;
max-width:1280px;
margin:0 auto;
}
我将 Blackbam 的解决方案应用于 body 中放置了 div 且 body 的左右填充为 15px 的情况。从计算出的高度中减去总的左右填充 (30px),删除了出现在 div.
上方和下方的 white-space
height:calc(100vw * aspect_ratio - 30px);
没有 calc()
也可以做到这一点。 padding
(甚至-top
和-bottom
)都是相对于元素的宽度,所以你可以得到同样的效果:
.chi_display_header {
background-size: cover;
width: 100%;
min-width: 474px;
max-width: 1280px;
height: 0;
padding-bottom: 21.09375%;
}
您还可以使用 relative/absolute 技巧使用内部 <div>
在内部添加元素,但如果内容超过包含高度,事情就会开始出错:
.chi_display_header {
...
position: relative;
}
.chi_display_header .inner {
position: absolute;
top: 0; left: 0; right: 0;
padding: 15px;
}
这是我目前拥有的代码(目前还不能使用):
HTML:
<div class="chi_display_header" style="background-image:url('http://localhost/.../header-dummy-small.png');"></div>
CSS:
.chi_display_header {
background-size:contain;
width:100%;
min-height:100px;
height:calc(1vw * 270 / 1280px);
max-height:270px;
max-width:1280px;
margin:0 auto;
}
这是居中的响应式背景图片 - 容器的宽度/高度应该可变,我不想使用 jQuery。
已知属性:
Ratio: 1280:270
Minimum height: 100px
Maximum height: 270px
Maximum width: 1280px
我尝试做的是用 calc 神奇地计算 .chi_display_header 的容器高度:
height = calc( CURRENT_SCREEN_WIDTH * 270 / 1280);
但是我目前的做法
height:calc(1vw * 270 / 1280px);
还没有工作。有CSS解决方案吗?
解决方案(共 4 条评论):
.chi_display_header {
background-size:cover;
width:100%;
min-height:100px;
height:calc(100vw * 270.0 / 1280.0);
max-height:270px;
max-width:1280px;
margin:0 auto;
}
我将 Blackbam 的解决方案应用于 body 中放置了 div 且 body 的左右填充为 15px 的情况。从计算出的高度中减去总的左右填充 (30px),删除了出现在 div.
上方和下方的 white-spaceheight:calc(100vw * aspect_ratio - 30px);
没有 calc()
也可以做到这一点。 padding
(甚至-top
和-bottom
)都是相对于元素的宽度,所以你可以得到同样的效果:
.chi_display_header {
background-size: cover;
width: 100%;
min-width: 474px;
max-width: 1280px;
height: 0;
padding-bottom: 21.09375%;
}
您还可以使用 relative/absolute 技巧使用内部 <div>
在内部添加元素,但如果内容超过包含高度,事情就会开始出错:
.chi_display_header {
...
position: relative;
}
.chi_display_header .inner {
position: absolute;
top: 0; left: 0; right: 0;
padding: 15px;
}