图像最大宽度最大高度在 IE 11 中不起作用答案

【问题标题】：Images max-width max-height not working in IE 11图像最大宽度最大高度在 IE 11 中不起作用
【发布时间】：2015-10-29 14:29:48
【问题描述】：

我在我的网站上使用 fullPage.js 以及以下 html 和 css 作为图像滑块。

它适用于 Mac 上的 Safari 和 Chrome，但不适用于 Windows 上的 IE 11。

有人知道如何解决这个问题吗？

演示：www.aronsommer.com

<div class="slide"><img src="images/bitumenpainting1.jpg" alt="Bitumenpainting 1"></div>

.slide img {
width : auto;
height : auto;
max-width : 90%;
max-height : 90%;
margin : 0 auto;
padding : 0;
display : block;
}

【问题讨论】：

见stackoverflow.com/questions/20801411/…
谢谢，但我不能使用背景图片。我想在将来向 fullPage.js 滑块添加更多带有的延迟加载图像。

标签： html css fullpage.js

【解决方案1】：

对不起。如果处理 CSS 文件会更容易。你需要一些 CSS Hacks，就像下面的例子：

/* IE7 */
*:first-child+html #element { color: red } 

/* IE7, FF, Safari, Opera  */
html>body #elemento { color: red }

/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/ body #elemento { color: red }

/* Opera 9.27 and safari 2 */
html:first-child #element { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #element { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #element { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #element {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#element { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
#element { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #element { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #element { color: red }

/* Tudo menos IE6-8 */
:root *> #element { color: red }

/* IE7 */
*+html #element {  color: red }

/* Firefox 3.0+ */
#element,  x:-moz-any-link, x:default { color: red }

您需要更改所有 CSS 以适应浏览器的兼容性。

希望对你有帮助

【讨论】：

谢谢，但这会破坏一切。

【解决方案2】：

以下媒体查询解决了我的 IE 11 问题。

使用视口单位 vw 和 vh 而不是百分比来表示最大宽度和最大高度。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.slide img {
max-width : 90vw;
max-height : 90vh;
}
}

【讨论】：

【解决方案3】：

这似乎是 IE11 中的一个错误：Bug Report。添加flex: 1（如报告中所示）

.slide img {
    flex: 1
    max-width: 100%
    max-height: 100%
}

为我工作。您可能必须将容器显示模式更改为 flexbox。像这样（示例中心内容）：

.slide {
    display: flex
    align-items: center
    justify-content: center
    width: whateveryoulike
    height: whateveryoulike
}

非常讨厌的错误！

【讨论】：

但是，不适用于肖像图像。对不起，我很热情。