随着移动设备的普及,越来越多的网站开始适配不同的分辨率,而对于图片来说,也需要进行相应的处理。不过有时候,我们发现在不同分辨率下,图片并不能正常显示。 这时候有可能是因为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; }
通过以上的修改,我们可以使得图片在不同的分辨率下得到正常的显示。因此,在进行响应式设计时,一定要注意对于图片的适配。
粉丝
0
关注
0
收藏
0