CSS img высота с% не работает

Question

Я хотел бы изменить размер изображения (и ползунка, содержащего изображение).

Следующий код CSS работает отлично:

.slick-slider .img-responsive{ 
    max-width:none; 
    min-width:100%; 
    width:100%; 
    height:300px; 
    object-fit: cover; 
} 

Цель достигается: изображение/слайдер заполняет всю ширину экрана и занимает всего 300px высоты. object-fit: обложка обрезает изображение.

Но поскольку я хотел бы работать отзывчивым, я хочу изменить высоту на процентное значение.

Но если я заменяю 300px на 30%, ничего не происходит (-> означает, что изображение имеет полную высоту, ничего не обрезано).

Answer 1

Не могли бы вы попробовать это для меня:

.slick-slider .img-responsive { 
    min-width: 100vw; 
    width: 100%; 
    height: 10vh 
    object-fit: cover; 
} 

Это заставляет изображение иметь высоту 10% от видовом, а затем в пикселях или процентах. Он должен создать отзывчивый макет, сообщить мне, если он сработает, и в противном случае поделиться jsfiddle, чтобы я мог совать.