CSS布局是前端開發中非常重要的一部分，其中封面圖片的布局也有很多技巧需要掌握。下面我們一起來學習一些CSS布局小說封面圖片的技巧。

.cover {
box-sizing: border-box; /* 設置盒模型為border-box */
position: relative;
width: 100%;
height: 300px;
padding: 20px;
background-color: #f3f3f3;
}
.cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cover .title {
position: absolute;
bottom: 20px;
left: 20px;
width: calc(100% - 40px);
font-size: 24px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}

首先，我們需要給封面圖片的容器設置盒模型為border-box，這樣可以更好地控制內邊距和邊框。然后設置容器的寬度為100%，高度為300px，加上內邊距和背景色，這樣就有了一個基本的容器。

接著，我們使用CSS屬性object-fit:cover來設置圖片等比例縮放，以完全覆蓋容器。同時，我們將標題用position:absolute絕對定位到容器底部，左右各留下20px的內邊距，使用calc函數設置標題寬度為容器寬度減去內邊距的兩倍。最后調整標題的字體大小、顏色和文本陰影樣式。

使用這些CSS技巧，我們可以輕松地實現一個美觀的小說封面圖片。在實際開發中，還可以通過JS動態設置圖片和標題等內容，讓封面更具有互動性。