在CSS中，我們可以使用多種方法來隱藏超出圖片的部分，以確保圖片不會超出其容器或頁面，以下是一些常用的方法：

1、使用object-fit屬性：

object-fit: cover; 可以使圖片覆蓋其容器，同時保持其寬高比，這樣可以確保圖片不會超出容器。

object-fit: contain; 可以使圖片適應(yīng)其容器，同時保持其原始寬高比，這樣可以確保圖片不會拉伸或壓縮。

2、使用max-width和max-height屬性：

- 通過設(shè)置max-width: 100%; 和max-height: 100%; 可以確保圖片不會超出其容器的大小。

3、使用overflow屬性：

- 通過設(shè)置overflow: hidden; 可以確保當圖片超出其容器時，超出的部分會被隱藏。

4、使用position屬性：

- 通過設(shè)置position: absolute; 可以使圖片相對于其***近的定位祖先（或初始包含塊）進行定位，這樣可以確保圖片不會超出頁面。

示例代碼

下面是一個示例代碼，展示了如何隱藏超出圖片的部分：

<div style="width: 300px; height: 200px; overflow: hidden;">
  <img src="example.jpg" style="width: 100%; height: auto;">
</div>

在這個示例中：

div 元素的寬度設(shè)置為300px，高度設(shè)置為200px，并且overflow 屬性設(shè)置為hidden，這樣當圖片超出div 元素時，超出的部分會被隱藏。

img 元素的寬度設(shè)置為100%，高度設(shè)置為auto，這樣圖片會適應(yīng)div 元素的大小，而不會超出。

圖片示例


通過結(jié)合使用CSS的多種屬性，如object-fit、max-width、max-height、overflow 和position，我們可以有效地隱藏超出圖片的部分，確保圖片不會超出其容器或頁面。