是否可以在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標簽以及媒體查詢。 這樣可以解決問題，並且在需要較小圖片尺寸的情況下，您可以發送較小的版本。 如果帶寬在這里非常重要，那么您可以考慮僅根據屏幕大小進行媒體查詢。