Изображение: мне нужно, чтобы высота 100% была важнее, чем ширина 100% - PullRequest
Новая
       20

Изображение: мне нужно, чтобы высота 100% была важнее, чем ширина 100%

0 голосов
/ 16 октября 2018

В основном у меня есть изображение, которое должно оставаться на 100% высоты независимо от размера экрана, поэтому оно отзывчивое, и его можно обрезать слева и справа (только не сверху и снизу).

В настоящее время у меня установлено изображение, отвечающее как по высоте, так и по ширине, но при определенной ширине и высоте оно обрезает верх и низ изображения.

Вот мой CSS: 

.banner{
    width:36%;
    float:left;
    min-height: 100vh;
    height: 100%;
}

.banner img {
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

PHP (Wordpress): 

<div class="banner">    
    <?php the_post_thumbnail(); ?>
</div>

1 Ответ

0 голосов
/ 16 октября 2018

уберите подгонку объекта и измените на auto: 

.banner img {
    display: block;
    width: auto;
    height: 100vh;
}

или заполнение объекта, но это может исказить изображение, вы уверены, что не хотите, чтобы оно было фоновым изображением?https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

...