css不同分辨率图片显示不出来

随着移动设备的普及，越来越多的网站开始适配不同的分辨率，而对于图片来说，也需要进行相应的处理。不过有时候，我们发现在不同分辨率下，图片并不能正常显示。

这时候有可能是因为CSS中对图片的设置不够完善所致。具体来说，可能出现以下几个问题：

1. 图片文件路径出错

 /* 错误写法 */
    .image {
      background-image: url('images/img.png');
    }
    /* 正确写法 */
    .image {
      background-image: url('../images/img.png');
    } 

2. 图片尺寸不合适

 /* 错误写法 */
    .image {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-image: url('../images/img.png');
    }
    /* 正确写法 */
    .image {
      width: 100%;
      padding-top: 100%; /* 让高度随着宽度变化 */
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url('../images/img.png');
    } 

3. 响应式图片未设置max-width

 /* 错误写法 */
    .image img {
      width: 100%;
      height: auto;
    }
    /* 正确写法 */
    .image img {
      max-width: 100%;
      height: auto;
    } 

通过以上的修改，我们可以使得图片在不同的分辨率下得到正常的显示。因此，在进行响应式设计时，一定要注意对于图片的适配。