使圖像對所有設備都有響應

我在我的網頁上有一個傳送帶，我試圖讓它在所有設備中都能夠響應。使圖像對所有設備都有響應

我這麼規定的高度上3個不同的設備CSS聲明相應爲350像素，255px，125px

.banner{ 
    max-width:100% !important; 
    background:url(http://xxx/images/slide4.jpg) no-repeat; 
    min-height:350px; 
    background-size:cover; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    -ms-background-size:cover; 
} 
.banner{ 
    min-height:255px; 
    max-width:100% !important; 
    background:url(http://xxx/images/slide4.jpg) no-repeat; 
} 
.banner{ 
    min-height:125px; 
    max-width:100% !important; 
    background:url(http://xxx/images/slide4.jpg) no-repeat; 
    }

我的HTML代碼：

<div class="banner">     </div>

請告知我怎樣才能讓我的形象，以適應跨越所有的設備。提前致謝。

來源

2015-11-13 Saibalu

可能的複製[使圖像響應 - 最簡單的方法（HTTP：//計算器。 com/questions/15458650/make-an-image-responsive-simplest-way） – lyndact

您沒有使用@media查詢的具體原因是什麼？ – Airwind711

我會爲每種媒體類型使用不同的圖像，因此您的瀏覽器無需使用矢量縮放。這和[@media]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）規則。 – PHPglue

您創建CSS的方式與您列出的最後一條規則級聯，因此您始終可以獲得125px的最小高度。您需要將規則分成媒體查詢。 @media (min-width: 320px) { .banner { min-height: 125px}} 通過這種方式，當您的視口大小發生變化時，規則將應用於您提供的媒體「斷點」。

來源

2015-11-13 04:24:18 cijanzen

寬度：當你在更寬廣的視角觀察時，100％會打破它。

以下是引導的IMG響應

max-width: 100%; 
display:block; 
height: auto;

這是你應該怎麼寫媒體查詢的

@media (min-width: 480px) { //for mobile devices 
    .banner { 
    min-height: 125px 
    } 
} 

@media (min-width: 768px) { // for tablets 
    .banner { 
    min-height: 255px 
    } 
}

來源

2015-11-13 05:19:59

使圖像對所有設備都有響應

回答

相關問題