Привет У меня есть несколько div на моей странице, которые имеют фоновые изображения, которые я хочу развернуть, чтобы охватить весь div, который, в свою очередь, может расширяться, чтобы заполнить ширину области просмотра.
Очевидно, что background-size: cover ведет себя неожиданно на устройствах iOS. Я видел несколько примеров того, как это исправить, но я не могу заставить их работать в моей ситуации. В идеале я бы предпочел не добавлять дополнительные теги <img> в HTML, но если это единственный способ, то я буду.
Вот мой HTML:
<body>
<div id="section1" class="section">
...
</div>
<div id="section2" class="section">
...
</div>
<div id="section3" class="section">
...
</div>
</body>
И CSS:
.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;
}
Вопрос в том, как я могу получить фоновое изображение, чтобы полностью покрыть раздел div, принимая во внимание ширину переменной браузера и переменную высоту содержимого в div?
