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

Question

如果观看者有智能手机或 PC，我需要更改图像的大小。这实现了我想要的，但这是一种不好的方法，因为加载了 4 次 img 并且它是多余的：

<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，则图像将被缩放直到300 像素宽。

见JSFiddle。

1.1 使用宽度百分比，具有固定宽度父项

如果你想使用之前的解决方案，但又不希望图像缩放到大于原始大小，可以使用max-width 设置父级。

见JSFiddle。

2。使用断点

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

见JSFiddle。

您可以阅读有关媒体查询和响应式 CSS here 的更多信息。

如果您不想使用自定义媒体查询大小并且想坚持使用特定于 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。这些尺寸记录在here。 xs 是默认值，因为 Bootstrap 3 使用 mobile-first approach。

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

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

Answer 4

这是一个使用 <picture> 元素和 Bootstrap 4 的 responsive breakpoints 的示例：

<picture>
  <source media="(min-width: 1200px)" srcset="/images/xl.png">
  <source  media="(min-width: 992px)" srcset="/images/lg.png">
  <source  media="(min-width: 768px)" srcset="/images/md.png">
  <source  media="(min-width: 576px)" srcset="/images/sm.png">
  <source  media="(max-width: 575px)" srcset="/images/xs.png">
  <img src="/images/default.png" alt="Example Text" style="width:auto;" >
</picture>

使用它，浏览器将根据设备的宽度加载单个正确的图像。对于旧版浏览器，它们只会加载默认的 <img> 元素。

Answer 5

HTML5 有一个新标签<picture>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

另外，boostrap 4 支持<picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Answer 6

我也是一个新手，但不是上面所有复杂的代码，这个简单的代码解决了我的问题。

#logo img {
    max-height: 100%; 
    max-height: 50vh; //50% of user's viewport height
}

如果您想更改 宽度，请尝试以下操作：

#logo img {
        max-width: 100%; 
        max-width: 50vw; //50% of user's viewport width
    }

我希望这也对其他人有所帮助。

Answer 7

随着 HTML5 的引入，<picture> 元素通常最适合此任务。它允许我们为我们选择的尺寸屏幕提供我们想要的内容： Perfect responsive images: HTML5 and Bootstrap 4

Answer 8

Bootstrap 5 有一个新的断点 XXL，它可能会影响 https://getbootstrap.com/docs/5.0/layout/breakpoints/ 提供的一些解决方案

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);