Html 在 lg、md sm 和 xs 处引导不同的 img 大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24087944/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap different img size at lg, md sm and xs
提问by Mateo Velenik
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:
如果查看者有智能手机或 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>
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.
它一次只显示一张图像，只有大小不同。如何在没有这个丑陋标记的情况下实现它？可能使用 CSS，为了简单起见，我将图像大小放在 HTML 中。
回答by Filly
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.
有多种解决方案，具体取决于您正在寻找的结果。通过调整结果单元格的大小来尝试 JSFiddle 的行为。
1. Using width percentage
1.使用宽度百分比
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.
您可以为图像设置百分比宽度，使其根据屏幕大小进行调整。如果百分比大于原始宽度，此解决方案可能会增加图像的大小，例如，如果图像宽度为 250 像素，并且您使用width: 50%，并且屏幕宽度为 600 像素，则图像将缩放到300 像素宽度。
See JSFiddle.
请参阅JSFiddle。
1.1 Using width percentage, with fixed width parent
1.1 使用宽度百分比，具有固定宽度的父级
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.
如果您想使用以前的解决方案但不希望图像缩放到大于原始大小，则可以使用max-width.
See JSFiddle.
请参阅JSFiddle。
2. Using breakpoints
2. 使用断点
Using CSS3 media queries to change the size of the image depending on the screen's width range.
使用 CSS3 媒体查询根据屏幕的宽度范围更改图像的大小。
See JSFiddle.
请参阅JSFiddle。
You can read more about media queries and responsive CSS here.
您可以在此处阅读有关媒体查询和响应式 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:
如果您不想使用自定义媒体查询大小，并且想坚持使用 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;
}
}
See JSFiddle. These sizes are documented here. xsis the default because Bootstrap 3 uses a mobile-first approach.
回答by jhamPac
img {
width: 100%;
}
This will make the image 100 percent of its parent. This will change the image accordingly. So if the parent is col-md-4 it will take up the whole div. So you could do
这将使图像成为其父图像的 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>
That image in this div will change relative to the col- classes if img is set to 100%. If you do not want the image to take up the whole div than just adjust accordingly 75%, 50% etc.
如果 img 设置为 100%，则此 div 中的图像将相对于 colclass 发生变化。如果您不希望图像占据整个 div，则只需相应地调整 75%、50% 等。
回答by Marodo
Rather than specify all the conditions where an image is hidden, better and cleaner to specify when it's visible:
与其指定图像隐藏的所有条件，不如指定图像何时可见：
<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" />
The browser will only show the relevant image at the relevant viewport size, this way you don't have to mess around with media queries.
浏览器只会以相关的视口大小显示相关图像，这样您就不必处理媒体查询。
回答by tyler.frankenstein
Here's an example using the <picture>element and Bootstrap 4's responsive breakpoints:
这是一个使用<picture>元素和 Bootstrap 4 的响应断点的示例：
<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>
Using this, browsers will load the single correct image depending on the device's width. For older browsers, they'll simply load the default <img>element.
使用它，浏览器将根据设备的宽度加载单个正确的图像。对于较旧的浏览器，它们只会加载默认<img>元素。
回答by ram
HTML5 has a new tag <picture>
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>
also, boostrap 4 supports <picture>
此外，boostrap 4 支持 <picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
回答by Tyson Gibby
With the introduction of HTML5 the <picture>element is typically best suited for this task. It allows us to serve exactly what we want to the size screen we choose:
Perfect responsive images: HTML5 and Bootstrap 4
随着 HTML5 的引入，该<picture>元素通常最适合此任务。它允许我们为我们选择的大小屏幕提供我们想要的内容：
完美的响应式图像：HTML5 和 Bootstrap 4
回答by ofarukcaki
I'm also a newbie but rather than all complex codes above, this simple code fixed my problem.
我也是一个新手，但不是上面所有复杂的代码，这个简单的代码解决了我的问题。
#logo img {
max-height: 100%;
max-height: 50vh; //50% of user's viewport height
}
If you want to make changes for width, then try this:
如果要更改width，请尝试以下操作：
#logo img {
max-width: 100%;
max-width: 50vw; //50% of user's viewport width
}
I hope this also help for others.
我希望这对其他人也有帮助。
