嗨,我的页面上有几个div,它们有背景图像,我想扩展以覆盖整个div,而div又可以扩展以填充视口的宽度.
显然,background-size: cover在iOS设备上出现意外行为.我已经看到了一些如何修复它的例子,但我不能让它们在我的情况下工作.理想情况下,我不想<img>在HTML中添加额外的标签,但如果这是唯一的方法,那么我会.
这是我的代码:
.section {
margin: 0 auto;
position: relative;
padding: 0 0 320px 0;
width: 100%;
}
#section1 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section2 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}
#section3 {
background: url(...) 50% 0 no-repeat fixed;
background-size: cover;
}<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>问题是,如何考虑浏览器的可变宽度和div中内容的可变高度,如何让背景图像完全覆盖div部分？