【CSS中如何控制圖片的大小】 在網頁中添加圖片是非常常見的操作，但對于一些需要精細控制的網頁，就需要對圖片的大小進行調整。下面介紹幾種CSS控制圖片大小的方法。 ## 1.使用width和height屬性 可以通過給標簽添加width和height屬性來控制圖片的大小。

<img src="example.jpg" alt="example" width="50" height="50">

在上述代碼中，將圖片的寬度和高度分別設置為50像素，這會縮小圖片的尺寸。 ## 2.使用max-width和max-height屬性 同樣，也可以使用max-width和max-height屬性控制圖片的大小。這種方法可以防止圖片被拉伸，同時也可以限制圖片的最大尺寸。

<img src="example.jpg" alt="example" style="max-width: 100%; max-height: 100%;">

在上述代碼中，將圖片的最大寬度和最大高度都設置為100%，這會使圖片適應父容器的尺寸。 ## 3.使用object-fit屬性 如果圖片的比例與容器的比例不相等，圖片可能會被拉伸或壓縮。這時可以使用object-fit屬性來控制圖片的適應性。

.container {
width: 200px;
height: 200px;
overflow: hidden;
}
.container img {
width: 100%;
height: 100%;
object-fit: cover;
}

在上述代碼中，使用了overflow:hidden和object-fit:cover來控制圖片的顯示方式，這會使圖片填滿容器并裁剪不必要的部分。 總而言之，通過上述幾種方法，可以在CSS中精細控制圖片的大小和適應性，使得網頁效果更加精美。