img { display: block; max-width: 100%; height: auto; }
这段CSS代码的作用是将图片设置为块级元素,使其在HTML页面中占据整行,然后将图片的宽度设置为最大值,并根据比例自动计算图片的高度,从而确保图片不会平铺。
此外,也可以使用CSS背景属性来避免图片平铺。
div { background-image: url('example.jpg'); background-repeat: no-repeat; background-size: cover; }
这段CSS代码将背景图片设置为’example.jpg’,并将重复属性设置为no-repeat,从而确保背景图片不会平铺。此外,background-size属性的cover选项可以将背景图片自适应扩展到整个HTML元素,确保没有空白区域。
总之,CSS提供了多种方法来避免图片平铺,大家可以根据需要选择最适合的方法来优化图片显示效果。