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
    }
}

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

如何将其设为普通<img />标签，当我更改宽度和高度时，它看起来不错

Answer 1

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

选择图片

Answer 2

尝试将以下属性与媒体查询结合使用：

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

通过CSS调整图像大小

2 个答案: