html - 具有后备功能的响应式 <picture> 图片

标签 html css responsive-design responsive-images

我正在尝试使用 <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/

相关文章:

javascript - Bootstrap 轮播字幕动画

javascript - jQuery隐藏iframe文件上传

html - 有什么方法可以从 HTML、CSS 或 MSHTML 界面引用 Internet Explorer 中的系统字体和颜色?

html - 避免底部滚动条

html - Internet Explorer 中的响应式设计

html - "Responsive image over responsive image"- 推特 Bootstrap

javascript - jquery函数改变html标签

HTML, Bootstrap 3 : curved bottom brand navbar

html - 为什么我的 div 在 Wordpress 中不能有全浏览器宽度的背景色?

html - 在移动屏幕尺寸中对齐按钮和输入表单 - Bootstrap