Question

在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类。它将缩放较小的图像和较大的图像。

＆＃13;

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

＆＃13;

  <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>

＆＃13;

Answer 2

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

img.w70p {
  width: 70%;
}

<img class="w70p" ...

它总是70％宽度

Flexbox，比div更大的图像在safari中缩小但在chrome

2 个答案: