Мобильная версияЧтобы добиться особого эффекта, я разделил изображение на пять частей шириной по 20 пикселей. фрагменты и отображали их в отдельных элементах div, организованных с помощью flex. Каждый элемент div использует фоновое изображение для отображения определенной части изображения с соответствующим образом настроенным фоновым положением.
Однако, когда я устанавливаю размер фона каждого фрагмента на покрытие, результат не меняется. соответствует эффекту простого использования фонового изображения: обложки на контейнере. Мне интересно, есть ли способ заставить каждый фрагмент работать как фоновое изображение: обложка, чтобы изображение отображалось так же, как при использовании фонового изображения: обложка для всего контейнера.
Есть ли способ заставить каждый фрагмент использовать background-size: Cover и добиться того же эффекта, что и при использовании Background-image: Cover для всего контейнера?
Image Slices Issue
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.slice-container {
height: 100px;
width: 100px;
display: flex;
}
.slices {
height: 100px;
width: 20px;
background-repeat: no-repeat;
background-size: 100px 100px;
background-image: url("
");/* Ideally, I want to use background-size: cover here but it does not match the effect */
/* background-size: cover; */
}
.slices-1 { background-position: 0px; }
.slices-2 { background-position: -20px; }
.slices-3 { background-position: -40px; }
.slices-4 { background-position: -60px; }
.slices-5 { background-position: -80px; }
.cover-container {
height: 100px;
width: 100px;
background-repeat: no-repeat;
background-size: cover;
background-image: url("
");}
Подробнее здесь: https://stackoverflow.com/questions/791 ... background
