目前来看,如果需要不同尺寸的图片,只能准备多个不同的图片。除此之外,还有一种方法可以在结构代码中插入背景图片,并使用CSS控制尺寸。

具体来说,可以将img元素定义为块级元素,并在CSS中设置其宽度和高度属性来控制尺寸。这样做虽然会增加一些麻烦,但能够实现良好的布局效果。另外,在选择尺寸时需要注意不同设备屏幕大小的影响,以确保在各种设备上都能正常显示图像。
background-size属性指定背景图片大小。background-size: length|percentage|cover|contain;
属性值:
length 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。





















