为什么当我通过 CSS 调整大小时，我的图像会缩小太多

Question

我有一个涉及 Bootstrap col-xs-push的设计，以恢复图像和文本块在我的设计中的位置。当用户调整窗口大小时，图像应该变小，以免破坏设计，但不幸的是，我对图像所做的任何更改都会使其缩小为一个相当可悲的版本。

示例 HTML：

<div class="row">
  <div class="col-xs-6 col-xs-push-6">
    <h2>Filler topic</h2>
    <h4 class="mtb">Filler filler filler filler filler filler filler filler filler filler filler filler filler filler.</h4>
  </div>
  <div class="col-xs-4 col-xs-offset-1 col-xs-pull-6 second-content">
    <img src="http://i.imgur.com/pMa4JM1.jpg" class="myimage">
  </div>
</div>

和 CSS：

@media(max-width:767px) {
.myimage {
  max-width: 50%;
  max-height: auto;
  width: 50%;
  height: auto;
  min-width: 50%;
  min-height: auto;
}
}

如果你看一下这个小提琴，你会看到这棵树长得比它应该的要小得多。

尽管设置了min-width，但它也会不断缩小（我这样做只是为了说明这种行为）。

为什么会这样，我该如何解决？

Answer 1

好吧，根据您添加的 css，它应该正常工作：

• 当分辨率小于 767px 时，它将变为其容器宽度的 50%;
• 最小宽度：50% 与容器相关，因此如果您的容器会缩小，图像也会缩小;

如果您希望图像具有固定的最小宽度大小，则可以为此使用 px，这样它就不会与其容器相关：

@media(max-width:767px) {
    .myimage {
        max-width: 50%;
        max-height: auto;
        width: 50%;
        height: auto;
        min-width: 100px;/*Note the px*/
        min-height: auto;
    }
}

Answer 2

如果将width或min-width设置为百分比值，它将应用与容器相关的百分比宽度，而不是图像本身。因此，随着容器的不断变小，图像将不断变小。

我建议在容器或图像上设置静态最小像素值。

Answer 3

你可以这样做。只需替换此css，现在图像将根据父div而增长

@media(max-width:767px) {
    
.myimage {
    max-width: 100%;
    height: auto;
}
}

Answer 4

图像宽度始终是其div 父级的 50%，而父级本身是窗口的 50%。因此，图像宽度是窗口的 25%，不考虑填充和边距。我在chrome开发人员面板中检查了它并正常工作。

另一件事是，当您以百分比定义宽度时，以百分比定义最小宽度和最大宽度也是不合逻辑的。实际上，在这里您不需要定义最小宽度和最大宽度。

如果你想要图像原生宽度的一半，请查看这个线程：以"原始"大小的 50% 显示图像

最好的答案是使用javascript：

<img src="..." onload="this.width/=2;this.onload=null;" />