我正在嘗試讓 bootstrap 4 carousel 根據設備方向使用橫向或縱向影像作為專案的背景......
以下簡化代碼以某種方式作業(頭部有某種風格),但我找不到相關資訊,image-set所以我不知道如何替換1x和2x使用landscape和portrait(或者是否可以這樣做):
<div class="container">
<div class="outer">
<div class="inner"
style="background-image: url('landscape.jpg');
background-image: -webkit-image-set(
url('landscape.jpg') 1x,
url('portrait.jpg') 2x);
background-image: -image-set(
url('landscape.jpg') 1x,
url('portrait.jpg') 2x)">
test
</div>
</div>
</div>
有人得到了這樣的作業,或者有人有更好的方法嗎?
uj5u.com熱心網友回復:
我認為,您使用的方式image-set是錯誤的。更準確地說,image-set用于指定同一圖片的一些不同質量的影像。
作為解決方案,我建議您使用background-size:cover或類似的東西。
uj5u.com熱心網友回復:
該image-set()功能不支持根據任何媒體條件更改影像。它只支持解析度和影像型別引數。
另一種方法是使用常規媒體查詢根據設備方向媒體功能更改元素的背景影像。
另一種替代方法是使用<picture> element,通過它您可以通過media屬性為不同的影像指定不同的媒體條件。
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/397360.html
