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

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有一些内联样式，这些样式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;` -> 这就是真正的问题：高度是从宽度（按图像的比例）自动计算的，但是当计算高度时大于710px，会强制只有710px，图片比例会失真。

您发布的图片是一个示例：由于给定的宽度，它实际上会高于 710 像素，但被压缩到 710 像素。

因此，您可以删除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上的百分比以垂直居中图像