是否可以在 DIV 背景图像标签中使用“响应式”图像？答案

【问题标题】：Is it possible to use 'responsive' images in/with a DIV background-image tag?是否可以在 DIV 背景图像标签中使用“响应式”图像？
【发布时间】：2016-04-06 00:50:22
【问题描述】：

我希望使用从数据库中以不同大小加载到我的网站的缩略图选择（全部在砌体网格内）

通常我会简单地使用background-image:url(image.jpg); background-size: 100% 100%:，但我会尝试对特定图像文件大小的带宽更加敏感。我还想针对使用纵向的移动浏览器定位特定裁剪。

是否可以在使用background-image 属性的同时使用<picture> 的功能，即media="(min-width: 40em) and (orientation: portrait)"？

或者我应该改用img 或picture 标签？

【问题讨论】：

不，你不能，但是你可以使用媒体查询来加载不同大小的背景图片（现在更多的浏览器只在某个媒体查询有效时才加载图片）......或者你需要 img/图片解决方案

标签： html css image responsive-design

【解决方案1】：

使用图像标签以及媒体查询。这将解决问题，如果需要更小的图片尺寸，您将能够发送更小的版本。如果带宽在这里非常重要，那么您可以考虑仅根据屏幕大小进行媒体查询。

【讨论】：