CSS圖片縮小代碼示例

在CSS中，我們可以使用width和height屬性來縮小圖片的尺寸，以下是一個簡單的示例，展示如何縮小圖片到原始尺寸的一半：

<img src="original_image.jpg" style="width: 50%; height: 50%;">

在這個示例中，width: 50%和height: 50%表示圖片的寬度和高度都縮小到原始尺寸的一半，你可以根據(jù)需要調(diào)整這些百分比值。

圖片等比例縮小

如果你想要圖片等比例縮小，可以使用object-fit屬性。

<img src="original_image.jpg" style="width: 50%; height: 50%; object-fit: contain;">

在這個示例中，object-fit: contain確保圖片在縮小過程中保持其原始的長寬比。

圖片不重復顯示

如果你想要圖片在縮小后不顯示重復的部分，可以使用object-position屬性。

<img src="original_image.jpg" style="width: 50%; height: 50%; object-position: center;">

在這個示例中，object-position: center確保圖片在縮小后不會顯示重復的部分，而是將圖片的中心部分顯示出來。

圖片縮小后的樣式調(diào)整

你還可以根據(jù)需要對縮小后的圖片進行進一步的樣式調(diào)整，例如添加邊框、調(diào)整透明度等，以下是一個更復雜的示例：

<img src="original_image.jpg" style="width: 50%; height: 50%; object-fit: contain; object-position: center; border: 1px solid #000; opacity: 0.5;">

在這個示例中，圖片縮小后還添加了1像素的黑色邊框和0.5的透明度。