Flexbox，大于 div 的图像在 safari 中缩小，但在 chrome 中没有答案

【问题标题】：Flexbox, image bigger than div shrinks in safari but not in chromeFlexbox，大于 div 的图像在 safari 中缩小，但在 chrome 中没有
【发布时间】：2016-07-07 04:56:11
【问题描述】：

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链接，不让我发没有代码。

【问题讨论】：

标签： html css google-chrome safari flexbox

【解决方案1】：

只需以百分比添加图像宽度

img.w70p {
  width: 70%;
}

<img class="w70p" ...

而且它永远是 70% 的宽度

【讨论】：

尝试添加这个。在 Chrome 中似乎仍然可以正常工作，在 safari 中图像仍然水平缩小。
非常适合我。刚刚在 safari & chrome & firefox 上测试过：jsfiddle.net/uo91um49/2

【解决方案2】：

您可以像 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>

【讨论】：

这似乎是一个很好的解决方法，但不是我最初打算做的。那么，如果一个问题在技术上不能回答所提出的问题，那么将其标记为正确答案是否违反了指导方针？