CSS3圖片居中設(shè)置及溢出隱藏方法

在CSS3中，我們可以使用flexbox或grid布局來(lái)實(shí)現(xiàn)圖片居中，同時(shí)結(jié)合overflow屬性來(lái)隱藏溢出的部分。

圖片居中設(shè)置

1、使用flexbox布局：

<div style="display: flex; justify-content: center; align-items: center;">
    <img src="圖片路徑" style="max-width: 100%; max-height: 100%;">
</div>

2、使用grid布局：

<div style="display: grid; place-items: center;">
    <img src="圖片路徑" style="max-width: 100%; max-height: 100%;">
</div>

溢出隱藏方法

結(jié)合overflow屬性，我們可以輕松實(shí)現(xiàn)溢出部分的隱藏，具體代碼如下：

<div style="overflow: hidden;">
    <img src="圖片路徑" style="max-width: 100%; max-height: 100%;">
</div>

這樣，當(dāng)圖片尺寸超出其包含元素的大小時(shí)，超出部分將被隱藏，通過(guò)調(diào)整max-width和max-height屬性，我們可以控制圖片在容器中的***大尺寸。