как сделать растянутое изображение соответствовать определенной высоте

Question

У меня есть изображение, которое растягивается по горизонтали, но при растяжении она выглядит следующим образом:

Как сохранить свою первоначальную высоту, а его кадрировать. Я не хочу использовать object-fit contain, потому что он вызывает очень много изображений, которые не выглядят хорошо.

Это мой разметки, и изображение ниже, и он хорошо реагирует на мобильный, но на широких экранах она выглядит обрезано по

<img class="img-responsive pad tyi abn" src="<?php echo $er ?>" style=" display: flex; flex-wrap: wrap; top:-1000% !important; background-size:cover !important; position:center center; background-repeat:no-repeat; max-height:710px !important; vertical-align:baseline; -webkit-filter: brightness(100%); -moz-filter: brightness(100%); -ms-filter: brightness(100%) ; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); min-width:100% !important; width:100% !important; margin:0px !important; overflow:hidden;" alt="Photo"> [The photo below][1] 

Answer 1

img { 
    height: 120px; 
} 

.cover { 
    width: 260px; 
    object-fit: cover; 
} 

https://css-tricks.com/almanac/properties/o/object-fit/

Answer 2

У вас есть несколько встроенных стилей в вашей «mg tag that in combination are problematic. The actual problem is the combination of width: 100% and max-height: 710px! important;` -> Это реальная проблема: высота автоматически вычисляется по ширине (по пропорциям изображения), но когда расчетная высота больше, чем 710px, i t будет вынуждено быть только 710px, и пропорция изображения будет искажена.

Приведенная вами фотография является примером: на самом деле она будет выше 710px из-за заданной ширины, но сжимается до 710px.

Таким образом, вы можете либо удалить это max-height:710px, либо удалить width: 100%. В обоих случаях вы получите правильные пропорции между шириной и высотой.

Answer 3

Попробуйте это:

.img-container { 
 
    height: 300px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
    
 
.img-container img { 
 
    width: 100%; 
 
    position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
}

<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/QtsjI.jpg"> 
 
</div>

Измените height на родительском контейнере на любой высоте вы хотите и отрегулировать процент на translateY вертикально центрировать изображение