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

Question

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

我的问题是图像在 Firefox 中没有按比例调整大小(图像不再按比例调整，如果图像宽度超过 max-width 属性，高度会增加，尽管宽度遵循 max-width 属性)，但在 Chrome 。

我不确定这是否可以单独使用 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

这是您的示例的工作 fiddle :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;
}