CSS實現圖片不超過div

經常會遇到一個問題，就是圖片超過了所在的div的大小，導致頁面排版出現問題。那么如何處理圖片不超過div呢？這里介紹一種CSS實現的方法。

.container{
width: 300px;
height: 300px;
overflow: hidden;
}
.container img {
max-width: 100%;
max-height: 100%;
}

上面的代碼中，首先設置container的寬度和高度為300px，并且設置了overflow:hidden，用來控制子元素的顯示超出部分是否顯示。然后設置img標簽的max-width和max-height屬性為100%，表示圖片的最大寬度和高度不能超過父元素，可以自適應父元素的大小，也不會超過容器的大小。

如果想保證圖片水平垂直居中，可以使用下面的代碼：

.container{
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
overflow: hidden;
}
.container img {
max-width: 100%;
max-height: 100%;
}

這里使用了flex布局，設置了align-items和justify-content屬性為center，即水平和垂直居中。

以上就是實現圖片不超過div的方法，希望對大家有所幫助。