設置圖像的寬度是窗口的大小

Question

是確保圖像正常佔用的寬度在移動設備上的唯一途徑，這一點：

if ($(window).width() < $("#entry img").width()) 
{ 
    $("#entry img").width($(window).width()); 
} 

就像是沒有在CSS沒有更好的辦法？

Answer 1

你可以使用媒體查詢的CSS檢查設備的寬度，然後只覆蓋圖像寬度爲100％的查詢移動寬度內：

MDN對如何去這個平時詳盡的文檔： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

<style> 
@media (max-width: 600px) { 
    .img { 
    width: 100%; 
    } 
} 
</style> 

這意味着小於600px的屏幕寬度的設備將服務的查詢中的CSS ...這可能是你的默認圖像樣式的覆蓋。您可以根據您的選擇調整查詢寬度，並在CSS中堆疊額外的查詢塊以設置平板電腦分辨率的獨特樣式等。