Html 根据屏幕大小更改图像源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30460681/
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
Changing image src depending on screen size
提问by kot09
I'm trying to change the image src depending on the screen size using media queries. I tried background:url(x); but it didn't work. I read somewhere that I should use content:url(x) instead, but when I do so, I get a blank page. Can anyone tell me what's wrong with my code?
我正在尝试使用媒体查询根据屏幕大小更改图像 src。我试过 background:url(x); 但它没有用。我在某处读到我应该使用 content:url(x) 代替，但是当我这样做时，我得到了一个空白页面。谁能告诉我我的代码有什么问题？
HTML:
HTML：
<div class="container" id="at-header">
<img class="image" id="logo" src="img/logo_white.png" />
<img class="image" id="main-img" src="img/desktop_homepage.jpg" />
</div>
CSS:
CSS：
@media screen and (max-width: 767px){
#main-img{
content:url("img/mobile_homepage.jpg");
}
}
@media screen and (min-width: 768px) {
#main-img{
content:url("img/tablet_homepage.jpg");
}
}
@media (min-width: 992px){
#main-img{
content:url("img/desktop_homepage.jpg");
}
}
@media (min-width: 1200px) {
#main-img{
content:url("img/desktop_homepage.jpg");
}
}
采纳答案by nozzleman
this is working for me:
这对我有用：
#main-img {
height: 250px;
width:100%
}
@media screen and (max-width: 767px) {
#main-img{
background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
}
}
@media screen and (min-width: 768px) {
#main-img{
background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
}
}
@media (min-width: 992px) {
#main-img{
background-image: url(http://subtlepatterns.com/patterns/paisley.png);
}
}
@media (min-width: 1200px) {
#main-img{
background-image: url(http://subtlepatterns.com/patterns/paisley.png);
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div id="main-img" />
</div>回答by
This one is working for me. I don't know if you're familiar with this tag but it doesn't even need CSS.
这个对我有用。我不知道你是否熟悉这个标签，但它甚至不需要 CSS。
<picture>
<source media="(min-width: 900px)" srcset="BigImage.png">
<source media="(min-width: 480px)" srcset="MediumImage.png">
<img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia">
</picture>
In this case "BigImage" Would show when the device width is more than 900px. "MediumImage" when its's more than 480px and "OtherImage" If It's less than 480px. If you had "max-width: 900px" instead of min-width, it would also show when the width is more than 900px.
在这种情况下，“BigImage”会在设备宽度超过 900 像素时显示。大于 480px 时为“MediumImage”，小于 480px 时为“OtherImage”。如果您使用“max-width: 900px”而不是 min-width，它也会在宽度超过 900px 时显示。
Hope it helps!
希望能帮助到你！
回答by Rafique Mohammed
We already have feature to load images based on screen sizes. You don't need CSS Media query for that. because to load dynamic images coming from database it's not feasible for you to create media query on the fly.
我们已经有了根据屏幕尺寸加载图像的功能。您不需要 CSS Media 查询。因为要加载来自数据库的动态图像，动态创建媒体查询是不可行的。
SOLUTION :
解决方案 ：
Use srcsetattribute
使用srcset属性
EXAMPLE :
例子 ：
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
in the above code all you need to define is width size next to the images separated by commas.
在上面的代码中，您只需要定义以逗号分隔的图像旁边的宽度大小。
Hope it helps :-)
希望能帮助到你 ：-）
回答by Phil
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Let's fix this, with <picture>! Like <video>and <audio>, The <picture>element is a wrapper containing several <source>elements that provide several different sources for the browser to choose between, followed by the all-important <img>element.
让我们解决这个问题，用<picture>！像<video>和<audio>所述的<picture>元件是包含几个一个包装<source>元件，对于浏览器之间进行选择提供几个不同的来源，随后所有重要的<img>元素。
