IE11 中的 Scss 缩放图像

Question

我有一张图片在 IE11 以外的所有浏览器中都可以正常显示。该图像具有以下 scss：

 &__container {
    text-align: center;
  }

  &__logo {
    img {
      background: transparent;
      height: 13.5em;
    }
  }

在IE11中，图片的底部和右侧被截掉了。我为 IE11 添加了一些自定义 CSS:

&__logo {
    img {
      background: transparent;
      height: 13.5em;
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        width: 30%;
        height: 30%;
      }
}

这显示了整个图像，但它仍然比您在其他浏览器中看到的要大得多，并且还在其下方添加了填充。 这也会阻止 text-align:center 工作并稍微偏左对齐。

我试过只删除高度或只删除宽度，但这并没有解决问题。

任何建议都会很有帮助！

Answer 1

您刚刚输入了一段没有 html 的代码，所以我不知道这是否是一个好的解决方案。添加到 img display: block; 这应该有助于 IE11

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  padding: 0;
}

body {
  padding: 0;
  border: 1px solid #000;
}

.logo {
  display: block;
  margin: auto;
  width: 800px;
  border: 3px solid #ff0000;
}

.logo img {
  display: block;
  background: transparent;
  height: 13.5em;
}

<div class="container">
  <div class="logo">
    <img src="https://dummyimage.com/600x400/000/fff" alt="">
  </div>
</div>

Answer 2

奇怪的是，删除 height 并添加 max-width 解决了问题。

&__logo {
    img {
      background: transparent;
      max-width: 16em;
    }
  }

如果有人知道为什么会这样，请发表评论，因为这对以后的了解很有用！

IE11 中的 Scss 缩放图像

Scss Scale image in IE11

css

internet-explorer

sass

internet-explorer-11