这是我目前拥有的代码(它还不能工作):
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。
已知属性:
比率:1280:270
最小高度:100像素
最大高度:270像素
最大宽度:1280像素
我尝试通过计算来神奇地计算出.chi_display_header的容器高度:
height = calc(CURRENT_SCREEN_WIDTH * 270 / 1280);
然而我的当前方法
height:calc(1vw * 270 / 1280px);
还没有效果。是否有CSS解决方案?