【问题标题】: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;
        }
      }
    

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

    【讨论】:

      猜你喜欢
      • 2017-02-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-13
      • 1970-01-01
      • 2015-09-27
      • 2013-05-29
      相关资源
      最近更新 更多