图片随父级元素自适应

最新推荐文章于 2023-08-22 19:30:00 发布

ZJ_152261

最新推荐文章于 2023-08-22 19:30:00 发布

阅读量3.4k

点赞数 1

分类专栏： html 文章标签： html css

本文链接：https://blog.csdn.net/ZJ_152261/article/details/80319085

版权

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

摘要由CSDN通过智能技术生成

<!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{
                /