0

我使用以下 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
    }
}

现在如果屏幕低于 880 像素，它将只显示 60x44 分辨率的图像，而不是完整的图像

我如何使它像一个普通的<img />标签，当我改变宽度和高度时它看起来还不错

4

2 回答 2

1

通过查看我阅读的这篇文章img { max-width: 100%; }，我想这就是您需要添加的所有内容。您也可以通过以下方式选择图像<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

于 2013-01-04T13:18:37.207 回答
0

结合媒体查询尝试以下属性：

.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-11T15:16:34.730 回答