通过 css 调整图像大小

Question

我使用以下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 /> 标签一样，当我改变宽度和高度时它看起来还不错

Answer 1

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

.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/

Answer 2

通过查看 this article 我阅读了 img { max-width: 100%; } ，这就是我猜你需要添加的所有内容。也可以通过<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">选择图片