css 学习 img 随容器缩放而等比变化

最新推荐文章于 2025-10-21 18:18:30 发布

原创最新推荐文章于 2025-10-21 18:18:30 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

css学习专栏收录该内容

7 篇文章

订阅专栏

本文提供了一个简单的HTML页面示例，演示了如何通过CSS设置图片容器和图片元素的样式来实现图片的等比缩放效果。代码适用于前端开发者学习布局技巧。

1，效果

2，代码

<!--Created by Sukla on 2018/3/27.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>图片等比缩放 实例</title>
    <meta charset="utf-8">
    <style>
        .img-container{
            width:700px;
            height:700px;
            background-color: #000000;
        }
        .img-item{
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>
<body>
<div class="img-container">
    <img class="img-item" src="resources/images/bg.jpg" alt="图片示例"/>
</div>
</body>
</html>