图片自适应样式
xuexi 2026-03-04 15:29:58 发表在:PHP 查看数:156
<style>
        /* 强制覆盖所有img标签的样式,优先级最高 */
        img {
            /* 最大宽度不超过容器宽度,强制覆盖 */
            max-width: 100% !important;
            /* 高度自动,保持宽高比,强制覆盖 */
            height: auto !important;
            /* 图片不会超出容器,强制覆盖 */
            display: block !important;
            /* 去除默认间隙(部分浏览器img行内元素会有默认间距) */
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            /* 图片超出容器时裁剪,保持比例(可选,根据需求调整) */
            object-fit: cover !important;
            /* 去除图片缩放时的模糊(可选优化) */
            image-rendering: -webkit-optimize-contrast !important;
        }

        /* 可选:给图片容器设置样式,演示自适应效果 */
        .img-container {
            width: 80%;
            margin: 20px auto;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
最近访问时间:2026-04-19 04:06:50
知识库:446条鸣谢:TAY  备案号:蜀ICP备2024090044号