調整圖像通過CSS

我用下面的CSS通過一個請求調整圖像通過CSS

div.image1{ 
    backgroud:url(image.png) -100px -2px no-repeat; 
    width:80px; 
    height:60px 
}

而是爲了讓我的網站友好的不同顯示器的分辨率來顯示多幅圖像，我可能需要調整其大小，但是當我改變它的寬度和圖像的高度看起來很糟糕，而不是全分辨率。

@media only screen and (max-width: 880px){ 
    div.image1{ 
     width:60px; 
     height:44px 
    } 
}

現在，如果屏幕比880px下它只會顯示60x44分辨率的圖像，而不是完整的圖像

我如何讓它像一個正常的<img />標籤，當我改變的寬度和高度沒有關係看起來不好

來源

2013-01-04 Enve

你可能尋找[CSS 3的背景大小（HTTP：/ /www.css3.info/preview/background-size/）屬性 – jao

通過查看this article我讀img { max-width: 100%; }，這就是所有你需要添加我猜。您也可以通過<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

來源

2013-01-04 13:18:37

是的，但.image1是一個div ..不是圖像標籤 – Enve

'background-size' http://www.w3schools.com/cssref/ css3_pr_background-size.asp –

是否支持IE7 – Enve

選擇圖像嘗試以下屬性與媒體查詢相結合：

.image { 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    width: 80px; 
    height: 60px; 
} 

.image1 { 
    background-image: url('https://c1.staticflickr.com/8/7405/26324518664_0d4e70e511_n.jpg'); 
} 

.image2 { 
    background-image: url('http://c2.staticflickr.com/8/7149/26855282121_fb57a99f0c_n.jpg'); 
} 

@media only screen and (max-width: 880px){ 
    .image { 
    width: 60px; 
    height: 40px 
    } 
    .image1 { 
    background-image: url('https://c1.staticflickr.com/8/7405/26324518664_0d4e70e511_s.jpg'); 
    } 
    .image2 { 
    background-image: url('http://c2.staticflickr.com/8/7149/26855282121_fb57a99f0c_s.jpg'); 
    } 
}

https://jsfiddle.net/alexndreazevedo/1umatrtz/

來源

2016-05-11 15:16:34 alexndreazevedo

調整圖像通過CSS

回答

相關問題