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

你的“tag that in combination are problematic. The actual problem is the combination of宽度中有几个内联样式：100％and max-height：710px！important;` - ＆gt;这是真正的问题：高度是根据宽度（按图像的比例）自动计算的，但是当计算出的高度超过710px时，它将被强制为仅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上的百分比以垂直居中图像

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

3 个答案: