CSS 比例图像在 Chrome 和 Firefox 上的表现不同

Question

我有一个 div，里面有一张图片。图像有不同的尺寸和方向，如果图像尺寸大于框架，我希望图像按比例调整大小（如果图像小于框架，则应保留原始尺寸）。

我的问题是图像在 Firefox 中没有按比例调整大小（图像不再成比例，如果图像宽度超过 max-width 属性，则高度会增加，尽管宽度尊重 max-width 属性），但看起来很好铬。

我不确定这是否可以单独使用 CSS 解决，但如果有的话，最好使用纯 CSS 解决方案。

代码

.frame {
  width: 160px;
  height: 160px;
  border: 10px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.frame img {
  box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9);
  max-width: 140px;
  max-height: 140px;
}

<div class="frame">
  <img src="//s3.amazonaws.com/ssiCebu/Confirmit/APAC/2015/May/23991558_LowRateRepricing/cards/1.jpg" />
</div>
<br><br>
<div class="frame">
  <img src="//i.bnet.com/blogs/vertical_farm_in_desert_chris_jacobs.jpg" />
</div>

Answer 1

这是为您的示例工作的小提琴：https://jsfiddle.net/tjmrmLcc/2/

尝试按照 CSS 规则进行编辑

.frame img {
  box-shadow: 1px 1px 160px 160px rgba(0, 0, 0, 0.9);
   width:100% /*Added Rule*/
  max-width: 100%;
  max-height: 140px;
}