如何根據屏幕大小更改圖像大小？

我想要一個橫幅顯示在大屏幕（桌面）寬度的50％和小屏幕（iphone）上100％的寬度上。如何根據屏幕大小更改圖像大小？

在圖像被顯示在屏幕上的50％的每個設備的時刻：

.advert-img { 
    width: 50%; 
    height:auto 
}

如何可以改變根據屏幕大小的寬度？

這是所有瀏覽器都可能的嗎？即舊黑莓瀏覽器

來源

2014-07-02 grabury

用手機來完成，現在具有高像素數，你應該使用的介質標籤小心。您可能想嘗試使用js來檢測這裏的移動用戶代理http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser – GleasonK

您需要media queries來完成此操作。在你的情況下，CSS是這樣的：

.advert-img { 
    width: 50% 
    height: auto; 
} 
@media screen and (max-width: 480px) { 
    .advert-img { 
    width: 100%; 
    } 
}

您可以在以下方面取代480px有什麼最適合你的內容的移動斷點

來源

2014-07-02 14:13:33 Jnatalzia

相關媒體查詢：方向。根據您正在構建的內容，最大寬度/最大高度和方向的組合可以幫助有效地在桌面設備，移動設備和平板電腦上顯示信息。 – Curlystraw

您可以使用CSS媒體查詢來區分的寬度該設備..比方說，你要區分有480寬度的移動，1024寬度的桌面，你可以這樣做下面的代碼：

.advert-img { 
    width: 50%; 
    height:auto 
} 
@media only screen and (max-device-width: 480px) { 
    width: 100%; 
}

欲瞭解更多信息請查看本link

來源

2014-07-02 14:15:07

把你的CSS這個媒體查詢：

@media (max-width: 1024) { 
    /* Code here works for mobiles and tablets. */ 
    .advert-img { width: 100%; } 
}

這將在所有相關的瀏覽器。它將在黑莓4.7.1及更高版本上運行。檢查黑莓手機：http://docs.blackberry.com/en/developers/deliverables/11844/BB_Browser_content_support_by_version_438586_11.jsp。

來源

2014-07-02 14:15:49

我想你想要什麼，實現可以通過媒體查詢對CSS3 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

來源

2014-07-02 14:16:48

如何根據屏幕大小更改圖像大小？

回答

相關問題