Я создаю сайт, использую хром для отладки. Я создаю страницу прокрутки с изображениями полной высоты в качестве фоновых изображений для моих подразделений, используя «background-size: cover;» и "background-attachment: fixed;".
В приложении Chrome (для мобильных устройств) отладки на моем компьютере, хотя прокручиваемого текста больше, чем может уместиться на изображении, изображение остается того же размера, а содержимое просто прокручивается по изображению, которое не было увеличено или искажено .
После загрузки на s3 и просмотра на моем мобильном устройстве фоновое изображение для div с большим количеством контента увеличивает фотографию (при условии, что она делает это для продолжения освещения) до точки, которая выглядит не очень хорошо.
До сих пор я пытался изменить фоновое вложение обертки содержимого на исправленное, а затем прокрутить, чтобы посмотреть, сработает ли оно; это не так. Единственное, что позволило фоновому изображению НЕ увеличиваться, - это изменить размер фона с обложки на 100% 80% ;. Это сохраняло исходный масштаб, но, очевидно, не охватывало весь текст, что приводило к разрыву между одним полноразмерным div изображения и следующим.
` .second-page{
background-image: linear-gradient(rgba(77, 77, 77, 0.5), rgba(77, 77, 77, 0.5)), url(images/background6_port.jpg);
background-repeat: no-repeat;
min-height: 100vh;
min-width: 100vw;
background-size: cover;
position: relative;
background-attachment: fixed;
}
.content{
margin-right: 15%;
margin-left: 15%;
}`
Ожидаемые результаты: фоновое изображение покрывает 100% области просмотра на мобильном устройстве, позволяя прокручивать текст и другой контент без увеличения
Фактические результаты: фоновое изображение увеличивается для охвата всей области содержимого, вызывая пикселизацию и плохой визуальный опыт.