使圖像適合具有固定寬度的容器 - 確保 IE11 不會拉伸或扭曲它們

Question

我有一個寬度為 150 像素、長度為 100 像素的容器 div。 使用 CSS，用戶將選擇的徽標圖像將設置為適合此容器。 我使用了一些 flexbox 樣式來居中圖像和 max-width: 100%, max-height: 100% 以確保圖像適合容器。 這對於 IE11 中的某些圖像效果不佳，因此我有一個僅限 IE11 的媒體查詢，該查詢還添加了flex: 1以修復它。

但問題是flex: 1修復了 IE11 問題，非常寬的圖像溢出容器。 但是，它會拉伸任何外觀更垂直的較窄圖像。

 .logo { width: 150px; height: 100px; align-self: center; margin: pxToRem(25px); display: flex; align-items: center; justify-content: center; } .logo-image { max-width: 100%; max-height: 100%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .logo .logo-image { flex: 1; } }

 <!-- Flex 1 fixes this image for IE11 --> <div class="logo"> <div class="logo"> <img class="logo-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Node.js_logo_2015.svg/1200px-Node.js_logo_2015.svg.png" /> </div> </div> <!-- This image gets stretched by the flex: 1 style --> <div class="logo"> <img class="logo-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/1200px-Firefox_logo%2C_2019.svg.png"> </div>

有沒有一種方法可以確保非常寬的圖像和非常高的圖像都適用於 IE11，而不會被拉伸或扭曲？ 謝謝。

Answer 1

將flex: wrap更改為min-width: 1px對於 IE11 樣式有效，至少我嘗試過大約十幾種不同的徽標：

更新的 CSS：

.logo {
  width: 150px;
  height: 100px;
  align-self: center;
  margin: pxToRem(25px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  max-width: 100%;
  max-height: 100%;
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {  
  .logo .logo-image {
    min-width: 1px;
  }
}

如果您認為有更好的方法來解決這個問題，請告訴我。