IE 在 Wordpress 主题中拉伸特色图像的问题答案

【问题标题】：Issues with IE stretching featured images in Wordpress themeIE 在 Wordpress 主题中拉伸特色图像的问题
【发布时间】：2016-10-31 13:23:56
【问题描述】：

我已经设置了一个 wordpress 主题，它使用特色图像作为页面上的标题图像（我这样做是为了方便客户自行修改）。因为标题图像容器需要是固定大小（页面宽度为 100%，高度为 300 像素），所以我使用了“object-fit:cover”css 标注，效果很好。产生的效果是图像跨越页面的整个宽度，然后自动垂直裁剪（我这样做是为了让客户端在上传之前不需要手动调整大小/裁剪图像）。

除了 IE（当然）之外，它完美无缺。我已经尝试了许多可能的解决方法，从“backgroundsize.htc”修复到 javascripts，到绝对定位和使用剪辑 css 功能，但它仍然没有给我想要的效果。 IE 坚持拉伸图像。在这个阶段，我不确定这在 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 用其各自的图像“填充”特色图像容器并裁剪而不是拉伸它，有人对我有什么建议吗？非常感谢任何帮助...

【问题讨论】：

标签： css wordpress internet-explorer

【解决方案1】：

将图像放入包含 div 的战略性使用 overflow: hidden

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

【讨论】：

谢谢安东尼，我试过了，但是 IE11 仍在拉伸图像...它强制宽度为 100%（这很棒），但将图像垂直挤压（这是我的问题) .... 奇怪的是，当我在 IE 11 中运行您的代码时，您的示例运行良好...我可能会尝试查看是否覆盖了 IE 特定代码中的“最大高度/宽度”，看看是否有效。 .
嗯，我没看到 - screencast.com/t/LZlN4U4B。是否很微妙，我只是没有注意到，和/或您能否发送您所看到内容的屏幕截图？
谢谢 Anthony - 你是对的，你提供的代码在 IE 中确实可以工作，但我的实现仍在挤压......一旦我弄清楚如何通过 SS 发送......
这可能是您博客的 CSS 中更复杂的东西。如果您可以直接发布指向博客的链接，它可以帮助其他人调查是否能够“检查”该页面。
谢谢 Anthony - 我很欣赏你发布帮助的速度...我将首先查看我的代码并在我查看了其他几个可能的问题后发布链接，你得到了我更广泛地思考这个问题！

【解决方案2】：

好吧……想通了。我希望这个解决方案可以在未来对其他人有所帮助，非常感谢 Anthony 对包装器的建议......我认为我必须避免的事情......

如果您想在您的 Wordpress 主题中实现一个特色图片，该图片会自动裁剪用户上传的媒体文件，而不是让 IE 搞砸，请执行以下操作：

对于您的常规特色图片 - 将此实现添加到您的 wordpress 主题中（我通常将其添加到 header.php 文件中）：

<div class="wrapper">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
} 
?>
</div>

然后将其添加到您的 css 中：

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

.wrapper {
height:300px;
overflow:hidden !important;
}

这将适用于除 IE 之外的所有浏览器（当然）。 IE（甚至版本 11）会在特色图像 div 中倾斜图像。要解决这个问题，请将此代码添加到 CSS 的底部：

/*IE HACK*/
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    img.wp-post-image {
    max-width: 100%;
    height:auto;
    width:auto;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    }
    }

为常规高度和宽度标注添加“最大宽度”和“自动”，这是我之前所缺少的。

感谢 Anthony 建议为特色图像使用包装器，我能够用图像填充包装器并强制 IE 不倾斜它。为了使图像在 IE 中居中（垂直和水平），我添加了“top,left,transform”代码，它将大图像在 IE 11 中的包装器中居中...

【讨论】：

【解决方案3】：

对于其他使用 27 主题模板的人，只需将其放入“附加 CSS”部分，通过单击屏幕顶部管理栏中的“自定义”即可访问该部分。在用有限的编码知识搜索了很长时间之后，这对我很有用，所以我想我会分享:) 特别感谢这个线程让我朝着正确的方向前进！

.single-featured-image-header img {
width:100%;
height:100%;
position:relative;
display:block;
top:0px;
object-fit:cover;
}

.single-featured-image-header {
height:25em;
overflow:hidden !important;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.single-featured-image-header img {
max-width: 100%;
height:auto;
width:100%;
}}

【讨论】：