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

Question

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

通常我只会使用background-image:url(image.jpg); background-size: 100% 100%: background-image:url(image.jpg); background-size: 100% 100%:但是我正在尝试使用特定的图像文件大小来提高带宽意识。 我还想使用纵向方向为移动浏览器定位特定的作物。

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

还是应该改用img或picture标签？

Answer 1

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