[代码技巧] 为diacuz评论区设置图片大小控制样式

/* 统一包裹层 */

.comiis_img_one {

    display: inline-block;          /* 让多张图可以并排 */

    max-width: 100%;

    line-height: 0;                 /* 干掉幽灵空白 */

}



/* 对图片本身再做一层约束 */

.comiis_img_one img {

    box-shadow: 0 0 5px rgba(0,0,0,.3);

    max-width: 100%;

    max-height: 360px;              /* 关键：限定高度，长图会被压下来 */

    width: auto;

    height: auto;

    vertical-align: middle;

    object-fit: contain;            /* 保证完整图，留白也不裁剪 */

    background: #f6f6f6;            /* 留白处用浅灰，避免空洞感 */

    cursor: zoom-in;                /* 暗示用户可点开看原图 */

    transition: transform .15s ease;

}



/* 鼠标悬停轻微放大，增强交互 */

.comiis_img_one img:hover {

    transform: scale(1.02);

}