45 lines
1.2 KiB
CSS
45 lines
1.2 KiB
CSS
.post-title {
|
|
height: 40px;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.post-img {
|
|
width: 100%; /* 强制宽度撑满父容器 */
|
|
height: 160px; /* 固定高度 */
|
|
object-fit: cover; /* 核心：保持比例裁剪 */
|
|
object-position: center; /* 确保裁剪时以中心为准（默认通常是中心，但显式声明更稳妥） */
|
|
display: block; /* 消除行内元素的底部间隙 */
|
|
}
|
|
|
|
.post-img img {
|
|
width: 100%; /* 宽度撑满父容器 */
|
|
height: 160px; /* 设定固定高度 */
|
|
display: block; /* 移除图片底部的幽灵间隙 */
|
|
|
|
/* 核心属性：居中缩放的关键 */
|
|
object-fit: cover; /* 保持原比例，裁切多余部分以填充容器 */
|
|
object-position: center; /* 确保缩放裁切时，视觉焦点在图片正中心 */
|
|
}
|
|
|
|
.recent-posts {
|
|
background-color: #f9f9f9 !important;
|
|
}
|
|
.feature-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.feature-box img {
|
|
width: 150px;
|
|
object-fit: cover;
|
|
}
|
|
.feature-box img:hover {
|
|
transform: scale(1.1);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|