Question

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

我的问题是图像不会在Firefox中按比例调整大小（图像不再成比例，如果图像宽度超过最大宽度属性，则高度会增加，但宽度会考虑最大宽度属性），但看起来很好铬。

我不确定是否可以单独使用CSS修复此问题，但如果有的话，首选仅使用CSS的解决方案。

CODE

.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;
}

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

1 个答案: