html - 通过 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

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