html - Flexbox，大于 div 的图像在 safari 中缩小但在 chrome 中不缩小

Question

https://jsfiddle.net/MR_Coder/uo91um49/

在 Safari 中，一旦浏览器开始压缩图像，图像就会开始缩小。

我想要的是 Chrome 中的行为，浏览器缩小但图像保持相同大小。

有人可以在 chrome 和 safari 中测试一下看看我的意思吗？

HTML:

<div class="expand">
<img src="#" alt="driving me nuts">
</div>

CSS:

.expand
 {
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: red;
 }

我为那个奇怪的代码道歉。第一次发帖，如果我有 jsfiddle 链接，不会让我在没有代码的情况下发帖。

Answer 1

您可以像 Bootstrap 对响应式图像所做的那样来做。在图像上使用 .image-responsive 类。它将缩放较小的图像和较大的图像。

.expand
{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.image-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

  <p>smaller works</p>
<div class="expand">
  <img src="http://placehold.it/350x150" alt="driving me nuts" class="image-responsive">
</div>

  <p>  bigger doesn't  </p>
<div class="expand">
  <img src="http://placehold.it/1000x150" alt="driving me nuts"  class="image-responsive">
</div>