移動改編網站中的圖像？

Question

我正在創建一個移動改編的Wordpress網站。即時通訊使用媒體查詢鏈接到移動設備上查看移動的CSS文件。當我在我的博客中發佈帖子時，圖片顯然會變大到移動屏幕。我應該如何解決它？

Answer 1

您可以使用下面的CSS縮放圖像。

img{ 
    max-width:100%; 
} 

如果你在你的頭，然後標記使用沒有使用視這一個：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" /> 

將上面的代碼。如果你想停止變焦組用戶可升級擴展在設備視窗的網站， =否

Answer 2

一個好的解決方案是爲不同的屏幕尺寸創建「桶」，並根據媒體查詢使用不同的背景圖像。

例如，您可以創建4桶用圖像寬度：

• 400像素的300-500px
• 800像素的500-800px
• 1200像素的800-1200px
• 1400px的1200px +

在CSS中，您可以像這樣創建媒體查詢：

#elem { 
    max-width: 100%; 
} 
@media all and (min-width: 300px) and (max-width: 500px) { 
    #elem { 
     background: url(../images/logo-400.jpg) left center no-repeat; 
    } 
} 
@media all and (min-width: 500px) and (max-width: 800px) { 
    #elem { 
     background: url(../images/logo-800.jpg) left center no-repeat; 
    } 
} 
@media all and (min-width: 800px) and (max-width: 1200px) { 
    #elem { 
     background: url(../images/logo-1200.jpg) left center no-repeat; 
    } 
} 
@media all and (min-width: 1200px) { 
    #elem { 
     background: url(../images/logo-1400.jpg) left center no-repeat; 
    } 
} 

同時使用「最小寬度」和「最大寬度」可確保設備的下載僅適合特定「桶」的圖像。