Изображения растянуты в начальной загрузке myCarousel - PullRequest
Новая
       33

Изображения растянуты в начальной загрузке myCarousel

0 голосов
/ 16 апреля 2019

Я делаю сайт для клиента, и он использует myCarousel на домашней странице и в полноэкранном режиме, изображения слайд-шоу в порядке, но в мобильном режиме изображения растягиваются по вертикали из-за высоты: 180 пикселей; Изображения слайд-шоу имеют 3-5 строк подписей, поэтому установите фиксированную высоту, но клиент говорит, что они растянуты, поэтому я поставил объектную посадку: обложка, в которой вид проблемы растянут, но он обрезал изображения с обеих сторон и клиент не доволен этим, я попробовал img-отзывчивый, который снова решает растянутую проблему, но подписи тогда не подходят. У меня нет идей, что попробовать, я не думаю, что можно что-то сделать, кто-нибудь может помочь, пожалуйста?

enter image description here

1 Ответ

0 голосов
/ 17 апреля 2019

ОБНОВЛЕНИЕ: думаю, я решил это с помощью следующего CSS 

.carousel-inner > .item > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: right center;
}    
.carousel-inner > .item:nth-of-type(7) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}
.carousel-inner > .item:nth-of-type(9) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}
.carousel-inner > .item:nth-of-type(10) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}
.carousel-inner > .item:nth-of-type(12) > img {
height: 180px;
object-fit: cover;
width: 100%;
object-position: left center;
}

Кажется, он работал с этим CSS

...