Блог

Главная - Вопросы по программированию - обрезать высоту изображения без масштабирования

обрезать высоту изображения без масштабирования

#css

#css — код

Вопрос:

Я знаю, что это простой вопрос, но я просто не могу найти решение.

В настоящее время я использую карусель начальной загрузки с изображениями разрешением 1920х1080. Я хочу, чтобы изображение осталось прежним, но высота должна быть обрезана до 480 пикселей. Примечание. НИКАКОГО МАСШТАБИРОВАНИЯ …. изображение должно быть просто обрезанным, без растяжения или масштабирования.

допустим, это мой css-класс:

 .carousel-top-img{
    height: 480px;// image scaled down to 853x480px
}
 
 .carousel-top-img{
    max-height: 480px;// image stretched but 1920x480px met
    width: 100%
}

Ответ №1:

Он не использует bootstrap, но вот чистое CSS-решение:

 #this_img{
        width: 1920px;
        height: 480px;
        object-fit: cover;
    }

Еще немного о подгонке объекта: ССЫЛКА

Я надеюсь, что это поможет

Комментарии:

1. Спасибо, похоже, в Bootstrap есть height: auto; пункт, .carousel-inner>.item>img который мешал мне, когда я пробовал это раньше…

2. Совет для тех, кто этим занимается: если вы обнаружите, что видимая часть обрезанного изображения находится не в том конце (например, она показывает нижнюю часть обрезанного изображения, а вы хотите видеть верхнюю часть), добавьте object-position свойство CSS вместе с object-fit .

Ответ №2:

Измените размеры .carousel-top-img контейнера и примените overflow: hidden к нему.

Метки: