当先锋百科网

首页 1 2 3 4 5 6 7

WP缩略图功能可以非常方便地在文章中显示图片缩略图,并在用户点击缩略图后自动跳转到原图。但是默认情况下,缩略图大小和排列比较固定,可能不太适合特定的布局。这时,我们可以使用CSS来对缩略图进行样式调整。

/* 缩略图容器 */
.wp-post-image {
width: 100%; /* 设置容器宽度为100% */
height: 200px; /* 设置容器高度为200px */
margin: 0 auto; /* 水平居中对齐 */
object-fit: cover; /* 图片保持比例居中,不裁剪 */
}
/* 鼠标悬浮效果 */
.wp-post-image:hover {
opacity: 0.8; /* 设置透明度,其余不变 */
}

以上代码分别设置了缩略图容器的宽度、高度、居中对齐和图片保持比例居中等样式。如果需要调整其他样式,可以根据具体情况进行修改。另外,我们还可以添加鼠标悬浮效果,让缩略图看起来更加生动,增加用户体验。