很長一段時間，我都使用圖片元素來處理每個視口不同大小的回應式影像。它作業得很好，但現在我不得不切換到回應<img>與srcset和sizes我嘗試我的圖片元素改寫到IMG風格。
經過長時間的搜索，我在以下位置找到了很好的檔案：
我試圖通過將代碼更改為
<img src="1920.jpg" title="..." alt="..."
srcset="
740.jpg 740w 1x,
1280.jpg 1280w 1x,
1600.jpg 1600w 1x,
1920.jpg 1920w 1x"
sizes="
(max-width: 740px) 740px,
(max-width: 980px) 1280px,
(max-width: 1280px) 1600px,
(max-width: 1480px) 1920px"
/>
不起作用......（它總是為所有視點加載最小的影像）
我從
（請參閱回應式影像導致性能問題）
但目前看來，這個問題還沒有最終的解決方案。
如果有人能提供新的想法，我會很高興。
uj5u.com熱心網友回復：
我找到了兩種可能的解決方案：
兩者都使用最小解析度媒體查詢來定義每個像素密度的單獨大小。我用一個比問題更簡單的例子來解釋它：
想法1
<img src="500.jpg" title="..." alt="..."
srcset="
500.jpg 500w,
1000.jpg 1000w"
sizes="
(min-resolution: 3dppx) 33vw,
(min-resolution: 2dppx) 50vw,
(min-resolution: 1dppx) 100vw"
/>
我使用了這些100vh示例，并“恢復”了瀏覽器拍攝current_with * pixel-density.
此解決方案適用于全屏影像，但您可以使用自定義視口。
想法2
<img src="500.jpg" title="..." alt="..."
srcset="
500.jpg 500w,
1000.jpg 1000w"
sizes="
(min-resolution: 3dppx) and (max-width: 600px) 1500px,
(min-resolution: 3dppx) and (max-width: 1200px) 2000px,
(min-resolution: 2dppx) and (max-width: 600px) 1000px,
(min-resolution: 2dppx) and (max-width: 1200px) 2000px,
(min-resolution: 1dppx) and (max-width: 600px) 500px,
(min-resolution: 1dppx) and (max-width: 1200px) 1000px"
/>
我基于螢屏寬度創建了類似的媒體查詢，但添加了“恢復”瀏覽器獲取current_with * pixel-density.
此解決方案適用于所有影像，即使它們不是全尺寸。在這里您可以使用自定義視口，但它是相對較多的代碼。
兩者背后的基本思想：
- 例如，對于像素密度 2x 和 500px 螢屏寬度，瀏覽器選擇雙倍尺寸的 srcset，這是在尺寸媒體查詢中定義的，并采用 1000px - image
- 所以我試圖為我想要的大小的兩倍（例如 1000 像素）定義新的媒體查詢，當它由像素比設備時，瀏覽器會得到我想要的 500 像素
在夏季，這意味著：
如果您想恢復瀏覽器為具有大像素密度的移動設備拍攝更大影像的效果，您必須為每個像素密度的尺寸計算新值。
對于這兩種解決方案，您也應該通過 css 定義顯示尺寸。
例如，這個簡單的 php 代碼示例表明：
<?php
$viewport = [
// Viewport => Image-Size
600 => 500,
1200 => 1000
];
// walk over all pixel-densities
for($i=3; $i>0; $i--) {
foreach($viewport as $vp => $w)
echo "(min-resolution: {$i}dppx) and (max-width: {$vp}px) "
.floor($w/$i) . "px,\n";
}
?>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/328166.html
上一篇：DivHTML元素隱藏在影像后面