css - IE 在 Wordpress 主题中拉伸(stretch)特色图片的问题

Question

我设置了一个 wordpress 主题，该主题使用特色图片作为页面上的标题图片(我这样做是为了方便客户自行修改)。因为标题图像容器需要固定大小(页面的 100% 宽度和 300px 高度)，所以我使用了完美的“object-fit:cover”css 标注。最终的效果是图像横跨页面的整个宽度，然后自动垂直裁剪(我这样做是为了让客户在上传图像之前不需要手动调整大小/裁剪图像)。

除了 IE(当然)，它工作完美。我已经尝试了许多可能的变通方法，从“backgroundsize.htc”修复到 javascripts，到绝对定位和使用剪辑 css 功能，但它仍然没有给我想要的效果。 IE 坚持拉伸(stretch)图像。在这个阶段我不确定这在 IE 中是否可行。

这是我的特色图片的 CSS:

.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;

}

img.wp-post-image {
max-height:300px;
margin:0 auto;

}

此代码适用于除 IE 以外的所有浏览器，因此我使用此代码为特色图片提供 IE 覆盖:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.wp-post-image {}
img.wp-post-image {}

}

关于如何强制 IE 用其各自的图像“填充”特色图像容器并裁剪而不是拉伸(stretch)它，有人能给我建议吗？非常感谢任何帮助...

Answer 1

策略性地使用overflow: hidden

将图像放入包含的 div 中

.wrapper {
  height: 100px;
  overflow: hidden;
}

<div class="wrapper">
  <img src="http://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-and-wrap-it-up-3.jpg" width=600 height=700>
</div>