调整图像通过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

回答

相关问题