css图片大小设置

2023-06-25 17:13:29 CSS 中设置图片的大小,可以使用 width 和 height 属性。这些属性允许您指定图像的宽度和高度,可以使用像素(px)、百分比(%)或其他单位进行设置。

CSS 中设置图片的大小,可以使用 width 和 height 属性。这些属性允许您指定图像的宽度和高度,可以使用像素(px)、百分比(%)或其他单位进行设置。

以下是几种常见的方式来设置图片的大小:

1、使用固定像素值:

img {
width: 200px;
height: 150px;
}

上述示例将图像的宽度设置为 200 像素,高度设置为 150 像素。

2、使用百分比:

img {
width: 50%;
height: auto;
}

上述示例将图像的宽度设置为其父元素宽度的 50%,并保持高度自动调整,以保持图像的纵横比。

3、使用max-width 和 max-height:

img {
max-width: 100%;
max-height: 100%;
}

上述示例将图像的最大宽度和最大高度设置为其父元素的宽度和高度。这将使图像适应其容器,并保持其纵横比。

4、使用object-fit 属性:

img {
width: 200px;
height: 150px;
object-fit: cover;
}

上述示例将图像的宽度设置为 200 像素,高度设置为 150 像素,并使用 object-fit: cover; 将图像按比例缩放,使其完全填充容器,可能会裁剪部分图像。

更新