等比例自适应图片

最新推荐文章于 2025-05-20 16:54:16 发布

原创最新推荐文章于 2025-05-20 16:54:16 发布 · 659 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#等比例放大缩小图片

css 专栏收录该内容

12 篇文章

订阅专栏

博客围绕图片等比例放大缩小展开，但具体内容缺失。等比例放大缩小图片在图像处理中较为重要，可保持图片原有比例和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,html{
            width: 100%;
            height: 100%;
        }
        *{
            padding: 0;
            margin: 0;
        }
        .div1 {
            position: relative;
            top: 0;
            left: 0;
            width: 50%;
        }
        .div1:before{
            content: "";
            display: block;
            padding-top: 50%;//高除以宽
        }
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="div1">
    <img src="1.jpg" alt="">
</div>
</body>
</html>