如何使拉伸图像适合特定高度

Question

I have an image which is stretched horizontally but when stretched it looks like this:

How do I retain its original height while cropping it. I don't want to use object-fit contain cause it causes so many images to be cropped which doesn't look good.

This is my markup, and the image below, and it responds well on mobile but on wider screens it looks cropped to fit

 <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

You have a few inline styles in your ìmg tag that in combination are problematic. The actual problem is the combination of tag that in combination are problematic. The actual problem is the combination of width: 100% and max-height:710px !important;` -> that's the real problem: The height is autmatically calculated from the width (by the proportions of the image), but when the calculated height is more than 710px, it will be forced to be only 710px and the image proportion will be distorted.

The picture you posted is an example: It would actually be higher than 710px due to the given width, but is squeezed down to 710px.

So you can either remove that max-height:710px or remove the width: 100% . In both cases you will get the right proportions between width and height.

Answer 3

Try this:

 .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>

Change the height on the parent container to whatever height you want and adjust the percentage on the translateY to vertically center the image