Html 如何在移动和桌面设备中显示不同的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39891785/
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
How to display different images in mobile and desktop devices
提问by user6728960
Hi can anyone tell me how to display differnet banner images in desktop and mobile devices.Here is my code.
嗨，谁能告诉我如何在桌面和移动设备中显示不同的横幅图像。这是我的代码。
HTML:
HTML：
<div class="row">
<img src="image\bannerimages\Career.png" class="img-responsive careerpage">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
<h2 class="careerbannertext1">Are you fanatically driven and ready to take on some of the best challenges the industry has to offer? </h2>
<h2 class="careerbannertext2">Come join us,be inspired to do the best work of your life!</h2>
</div>
Right now in my desktop version it is displaying this image i need to change another image in mobile version.
现在在我的桌面版本中它正在显示这个图像我需要在移动版本中更改另一个图像。
采纳答案by ma?o
For example:
例如：
.img-responsive.mobile {
display: none;
}
@media only screen and (max-device-width: 480px) {
.img-responsive {
display: none;
}
.img-responsive.mobile {
display: block;
}
}<div class="row">
<img src="image\bannerimages\Career.png" class="img-responsive careerpage">
<img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
<h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
...
</div>回答by Ron.Basco
you can try this one:
你可以试试这个：
<picture>
<source
media="(min-width: 650px)"
srcset="images/img1.png">
<source
media="(min-width: 465px)"
srcset="images/img2.png">
<img src="images/img-default.png"
alt="a cute kitten">
</picture>
the image tag is still there so you can put a default image for the other browser that doesnt support the picture tag.
图片标签仍然存在，因此您可以为不支持图片标签的其他浏览器放置默认图片。
