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

如果观众有智能手机或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中。

根据您所寻找的结果，有多种解决方案。通过调整结果单元格的大小来尝试JSFIDLE的行为

1.使用宽度百分比 您可以设置图像的百分比宽度，以便根据屏幕大小进行调整。如果百分比大于原始宽度，此解决方案可能会增加图像的大小，例如，如果图像的宽度为250px，并且您使用

宽度：50%

，并且屏幕宽度为600px，则图像将被缩放到300px宽

看

1.1使用宽度百分比，固定宽度父对象 如果要使用上一个解决方案，但不希望图像缩放比原始大小大，可以使用

max width

设置父级

看

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

看

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

如果您不想使用自定义的媒体查询大小，并且希望坚持使用特定于引导的断点，那么您的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;
    }
}

看。这些尺寸已记录在案

xs

是默认值，因为引导程序3使用

这将使图像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中的图像将相对于col类发生变化。如果您不希望图像占据整个div，而只是相应地调整75%、50%等。

而不是指定图像隐藏的所有条件，那么最好指定图像的可见时间：

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

---

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

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

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

---

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

HTML5有一个新标签

此外，boostrap 4支持

---

下面是一个使用元素和引导4的示例：

---

使用此选项，浏览器将根据设备的宽度加载单个正确的图像。对于较旧的浏览器，他们只需加载默认的

元素。

随着HTML5的引入，

元素通常最适合此任务。它允许我们根据所选的屏幕大小提供所需的服务：

---

引导程序5有一个新的断点XXL，它可能会影响提供的一些解决方案

$grid断点：(
xs:0,，
sm:576px，
md:768px，
lg:992px，
xl:1200px，
xxl:1400px
);我现在实现了它，它工作得非常完美。很明显，你在解决方案上付出了很多努力，我真的很感激你——谢谢！。干杯但是，如果每种显示格式有不同大小的不同图像，它仍会加载每幅图像。这就是为什么我认为媒体查询非常适合移动设备。随着HTML5的引入，
元素通常最适合此任务。它让我们能够根据自己选择的屏幕大小提供准确的服务：完美的响应图像：HTML5和Bootstrap 4-虽然这个链接可能会回答这个问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效-
#logo img {
        max-width: 100%; 
        max-width: 50vw; //50% of user's viewport width
    }

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

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

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