IE11中的Scss缩放图像答案

【问题标题】：Scss Scale image in IE11IE11中的Scss缩放图像
【发布时间】：2019-09-16 17:11:39
【问题描述】：

我的图像在 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 工作，并稍微偏离中心向左对齐。

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

任何建议都会很有帮助！

【问题讨论】：

这里可以添加sn-p，不仅可以添加样式，还可以添加css

标签： css internet-explorer sass internet-explorer-11

【解决方案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>

【讨论】：

【解决方案2】：

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

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

如果有人知道为什么会这样，请发表评论，因为这对将来很有用！

【讨论】：