CSS圖片高度自動換行

在網頁設計中，圖片是不可或缺的一個元素，但往往圖片的長寬比例并不符合設計要求，這時候就需要使用CSS來實現高度自動換行的效果。

CSS中提供了一個屬性‘object-fit’，通過設置為‘cover’或者‘contain’可以實現圖片的自適應大小，而且不會失真。但是，圖片自動換行需要使用到另一個CSS屬性‘float’，使得圖片能夠流動到一行的末尾，自動跳到下一行。

img {
width: 100px;
height: 100px;
object-fit: cover;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}

以上代碼中，我們設置了圖片的寬高為100px，使用‘object-fit’的‘cover’屬性將圖片填充滿容器并保持比例不失真，使用‘float’屬性將圖片左浮動，然后設置右和下的margin。最后，將圖片直接嵌套到p標簽或者div標簽里面，就可以實現圖片自動換行的效果。

如果希望全部圖片都在同一高度，可以為圖片容器再設置一下高度。下面是一個實際應用的例子：

.image-box {
width: 100%;
height: 120px;
margin-bottom: 15px;
}
.image-box img {
width: auto;
height: 100%;
object-fit: cover;
float: left;
margin-right: 10px;
}

在這個例子中，我們首先設置圖片容器為一定的高度，然后為圖片設置高度為容器高度，這樣就保證了所有圖片的高度都一致。同樣的，我們通過‘object-fit’屬性實現圖片的自適應大小，通過‘float’屬性實現自動換行的效果。

CSS帶來了很多強大的功能，讓網頁設計更加靈活和美觀，圖片自動換行就是其中一個例子。使用CSS時，我們需要多加嘗試和實踐，才能發現更多的功能和技巧。