CSS圖片撐破div是開發中常遇到的問題，如何解決呢？

<div class="container">
<img src="example.jpg" alt="example">
</div>
.container {
width: 200px;
height: 200px;
background-color: #ccc;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

以上代碼實現了一個200px x 200px的div容器，但是當我們在div中加入一張比容器大的圖片時會發現，圖片會將div撐破。

解決方法：

1. 縮放圖片

.container img {
width: 100%;
height: auto;
}

將圖片寬度設置為100%，高度自適應即可解決撐破div的問題，但是會導致圖片變形。

2. 裁剪圖片

.container {
width: 200px;
height: 200px;
background: url(example.jpg) center center / cover no-repeat;
}

使用CSS的background屬性，將圖片作為背景并且使用cover屬性裁剪即可解決問題，但是無法對圖片進行定位、動畫等操作。

3. 使用position屬性

.container {
width: 200px;
height: 200px;
background-color: #ccc;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}

這種方法比較靈活，使用position:absolute定位，并設置min-width和min-height為100%即可。

總之，解決CSS圖片撐破div的問題，有不同的方法，選擇適合自己的即可。