调整图片显示

This commit is contained in:
浪子 2024-06-20 09:38:13 +08:00
parent ffe4db83de
commit 0c72f67d8e
1 changed files with 10 additions and 6 deletions

View File

@ -110,7 +110,7 @@ div pre code {
word-break: break-word; word-break: break-word;
} }
div p a { div p a {
word-break: break-all; word-break: break-all;
word-break: break-word; word-break: break-word;
} }
.thumbnail-image { .thumbnail-image {
@ -119,6 +119,9 @@ div p a {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
border-radius:4px;
transition:transform .3s ease;
cursor:zoom-in;
} }
.resimg { .resimg {
display: grid; display: grid;
@ -128,12 +131,13 @@ div p a {
} }
.thumbnail-image img { .thumbnail-image img {
width:100%; width:100%;
height:170px; min-height: 200px;
object-fit:cover; object-fit:cover;
border-radius:4px; }
transition:transform .3s ease; img {
cursor:zoom-in object-fit: cover; /* 保持图片的纵横比,但会将图片裁剪以填充容器 */
} object-position: center; /* 保证中央部分 */
}
/* 当屏幕宽度小于732px时 */ /* 当屏幕宽度小于732px时 */
@media (max-width: 732px) { @media (max-width: 732px) {
.resimg { .resimg {