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

}

如果你看看这个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;
    }

}

Answer 2

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

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

Answer 3

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

另一件事是当你以百分比定义宽度时，定义min-width和max-width也是不合逻辑的。实际上，您无需定义最小宽度和最大宽度。

如果你想要一半的图像原生宽度看这个线程： Display image at 50% of its "native" size

最佳答案是使用javascript：

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

Answer 4

你可以这样做。只需替换此css，现在图像将增长取决于父div

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

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

4 个答案: