Question

我已经设置了一个wordpress主题，在页面上使用特色图像作为标题图像（我这样做是为了让客户可以轻松地自行修改）。因为标题图像容器需要是固定大小（页面宽度为100％，高度为300px），所以我使用的是“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用其各自的图像“填充”特色图像容器并裁剪而不是拉伸它？任何帮助都非常感谢...

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

Answer 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%);
    }
    }

添加＆＃34; max-width＆＃34;和＆＃34;汽车＆＃34;对于常规的高度和宽度标注，是我以前缺少的。

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

Answer 3

对于使用二十七个主题模板的其他任何人，只需将其插入“其他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%;
}}

IE扩展的问题推出了Wordpress主题中的图像

3 个答案: