图片随父级元素自适应

原创于 2018-05-15 10:13:54 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

html 专栏收录该内容

3 篇文章

订阅专栏

该博客通过HTML和CSS代码展示了如何使图片随父级元素自适应。使用了一个名为.img-container的相对定位div，通过设置宽度和内填充来调整图片尺寸，并利用绝对定位的img元素确保图片完全覆盖容器。此外，还应用了CSS样式以实现图片的自适应效果并添加了边框以清晰展示容器边界。

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

<!DOCTYPE html>
<html>
    <head>
        <title>测试用例</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="assets/css/common/common.css">
        <link rel="stylesheet" type="text/css" href="assets/css/demo.css">

        <style>
            .img-container{
                /*将图片容器设置为相对定位，作为图片定位的参照*/
                position: relative;
                /*设置块相对于其父级元素的宽度*/
                width:20%;
                /*图片容器只设置宽度属性，利用padding-top/padding-bottom将块撑开，设置相对于父级元素宽度的百分数*/
                padding-bottom: 20%;
                /*初始化图片容器高度为零*/
                height: 0;
                /*超出图片容器部分隐藏*/
                overflow: hidden;
                /*显示图片容器边框*/
                border:1px solid red;
            }
          .img-container img{
                /*设置图片为绝对定位，相对于图片容器定位*/
                position: absolute;
                /*距离图片容器顶部和左边位置为0*/
                top:0;
                left: 0;
                /*相对于图片容器大小比例，此处为全覆盖图片容器*/
                width: 100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div class="img-container">
            <img src="assets/images/icon.png">
        </div>
    </body>
    <script src="assets/js/demo.js"></script>
</html>