引导不同的img大小在lg,md sm和xs

Question

如果观众有智能手机或PC,我需要让图像改变它的大小.这实现了我想要的,但这是一个糟糕的方法,因为加载img 4次,它是多余的:

<div class="col-md-4 text-center">
    <img class="hidden-md hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="250" height="250" />
    <img class="hidden-lg hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="200" height="200" />
    <img class="hidden-lg hidden-md hidden-xs" src="~/Content/Images/masinaC.png" width="150" height="150" />
    <img class="hidden-lg hidden-md hidden-sm" src="~/Content/Images/masinaC.png" width="100" height="100" />
</div>

它一次只显示一个图像,只有大小不同.没有这个难看的标记如何实现它？可能使用CSS,我将图像大小放在HTML中只是为了简单起见.

Answer 1

根据您要查找的结果,有多种解决方案.通过调整结果的单元格来尝试JSFiddle的行为.

1.使用宽度百分比

您可以为图像设置百分比宽度,以便根据屏幕大小进行调整.如果百分比大于原始宽度,此解决方案可能会增加图像的大小,例如,如果图像宽度为250px,并且您使用width: 50%,并且屏幕宽度为600px,则图像将缩放,直到其宽度为300px.

见JSFiddle.

1.1使用宽度百分比,父宽度固定

如果要使用以前的解决方案,但不希望图像缩放比原始大小更大,则可以设置父级max-width.

见JSFiddle.

2.使用断点

使用CSS3媒体查询根据屏幕的宽度范围更改图像的大小.

见JSFiddle.

你可以阅读更多有关媒体查询和响应CSS 这里.

如果您不想使用自定义媒体查询大小,并且您希望坚持使用特定于Bootstrap的断点,那么您的CSS应该是:

/* xs */
img {
    width: 100px;
    height: auto;
}
/* sm */
@media (min-width: 768px) {
    img {
        width: 150px;
    }
}
/* md */
@media (min-width: 992px) {
    img {
        width: 200px;
    }
}
/* lg */
@media (min-width: 1200px) {
    img {
        width: 250px;
    }
}

见JSFiddle.这些尺寸记录在这里.xs是默认值,因为Bootstrap 3使用移动优先方法.

Answer 2

img {
  width: 100%;
}

这将使图像成为其父图像的100％。这将相应地更改图像。因此，如果父级是col-md-4，它将占用整个div。所以你可以做

<div class="col-md-4 col-sm-4 col-xs-4">

  <img src="where ever the image is" alt="what ever">

</div>

如果将img设置为100％，则该div中的图像将相对于colclass改变。如果您不希望图像占据整个div，则只需要相应地调整75％，50％等即可。

Answer 3

与其指定隐藏图像的所有条件，不如更清晰地指定何时显示图像：

<div class="col-md-4 text-center">
<img class="visible-lg" src="~/Content/Images/masinaC.png" width="250" height="250" />
<img class="visible-md" src="~/Content/Images/masinaC.png" width="200" height="200" />
<img class="visible-sm" src="~/Content/Images/masinaC.png" width="150" height="150" />
<img class="visible-xs" src="~/Content/Images/masinaC.png" width="100" height="100" />

浏览器将仅以相关的视口大小显示相关图像，这样您就不必搞乱媒体查询。