我正在尝试使用 <picture>
元素提供 3 个不同的图像:1 个用于移动设备,1 个用于 min-width: 768px
, 1 作为 IE 作为后备。
<picture>
<source class="article-bg-image" media="(min-width: 768px)" srcset="tablet-desktop.jpg" alt="Text" title="Text">
<img class="img-responsive" srcset="mobile.jpg" alt="Text" title="Text">
</picture>
这在移动设备和桌面设备上都能正常工作,但我不希望将移动设备图像用作 IE 的备用图像。我将如何专门为移动设备提供图像?我又试了一次source
没有media
属性,但未使用。
提前致谢!
最佳答案
你可以这样试试
<img src="mobile.jpg" class="img-responsive" srcset="large.png 1280w,medium.png 640w, small.png 320w" sizes="100%" alt="Text" title="Text">
关于html - 具有后备功能的响应式 <picture> 图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47578040/