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

Question

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

示例 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;
}

}

如果你看一下这个fiddle ，您会看到树长得比应有的小得多。

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

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

Answer 1

根据您添加的 CSS，它可以正常工作:

• 当分辨率小于767px时，会变成容器宽度的50%；
• min-width: 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;
    }

}