调整图片
This commit is contained in:
parent
65d780c01a
commit
ffe4db83de
|
@ -118,12 +118,14 @@ div p a {
|
||||||
transition: transform .3s ease; /* 鼠标悬停时的过渡效果 */
|
transition: transform .3s ease; /* 鼠标悬停时的过渡效果 */
|
||||||
cursor: zoom-in; /* 鼠标指针变为放大镜 */
|
cursor: zoom-in; /* 鼠标指针变为放大镜 */
|
||||||
}
|
}
|
||||||
|
img {
|
||||||
|
object-fit: cover; /* 保持图片的纵横比,但会将图片裁剪以填充容器 */
|
||||||
|
object-position: center; /* 保证中央部分 */
|
||||||
|
}
|
||||||
/* 缩略图内的图片样式 */
|
/* 缩略图内的图片样式 */
|
||||||
.thumbnail-image img {
|
.thumbnail-image img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
min-height: 200px;
|
||||||
object-fit: cover; /* 保持图片的纵横比,但会将图片裁剪以填充容器 */
|
|
||||||
object-position: center; /* 保证中央部分 */
|
|
||||||
}
|
}
|
||||||
/* 当屏幕宽度小于732px时 */
|
/* 当屏幕宽度小于732px时 */
|
||||||
@media (max-width: 732px) {
|
@media (max-width: 732px) {
|
||||||
|
@ -136,6 +138,10 @@ div p a {
|
||||||
.resimg {
|
.resimg {
|
||||||
grid-template-columns: 1fr; /* 修改为一列 */
|
grid-template-columns: 1fr; /* 修改为一列 */
|
||||||
}
|
}
|
||||||
|
.thumbnail-image img {
|
||||||
|
width: 100%;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.load-more-btn {
|
.load-more-btn {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
Loading…
Reference in New Issue