Bootstrap不同img大小在lg，md sm和xs [英] Bootstrap different img size at lg, md sm and xs

问题描述

如果观众有智能手机或电脑，我需要更改图片大小。这实现了我想要的，但它是一个糟糕的方式来做，因为加载img 4次，它是多余的：

I need to make a image change it's size if the viewer has a smartphone or a PC. This achieves what I want but it's a bad way to do it because of loading the img 4 times and it's redundant:

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

It displays only one image at once, and only the size differs. How to achieve it without this ugly markup? Possibly with CSS, I put the image sizes in HTML just for simplicity.

推荐答案

结果您正在寻找。通过调整结果单元格的大小来尝试JSFiddle的行为。

There are multiple solutions to this, depending on the results you are looking for. Try the JSFiddle's behaviour by resizing the result's cell.

您可以设置图像的百分比宽度，以便其根据屏幕大小进行调整。如果百分比大于原始宽度，则此解决方案可能会增加图片的大小，例如，如果图片宽度为250像素，而您使用 width：50％屏幕宽度为600像素，图片将缩放，直到宽度为300像素。

You can set a percentage width to the image so it adapts depending on the size of the screen. This solution may increase the size of the image if the percentage is bigger than the original width, e.g., if the image is 250px wide, and you use width: 50%, and the screen width is 600px, the image will be scaled until it is 300px wide.

请参阅 JSFiddle 。

要使用以前的解决方案，但不希望图像比原始大小更大，可以设置 max-width 的父级。

If you want to use the previous solution but don't want the image to scale larger than the original size, you can set a parent with max-width.

请参阅 JSFiddle 。

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

Using CSS3 media queries to change the size of the image depending on the screen's width range.

请参阅 JSFiddle 。

您可以详细了解媒体查询和响应式CSS 此处。

You can read more about media queries and responsive CSS here.

如果您不想要使用自定义媒体查询大小，并且您想要坚持使用Bootstrap特定的断点，您的CSS应该是：

If you don't want to use custom media query sizes and you want to stick with the Bootstrap-specific breakpoints, your CSS should be:

/* 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使用移动优先方法。

See JSFiddle. These sizes are documented here. xs is the default because Bootstrap 3 uses a mobile-first approach.

这篇关于Bootstrap不同img大小在lg，md sm和xs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！