广告位联系
返回顶部
分享到

CSS图片铺满div的实现方法

css 来源:互联网 作者:佚名 发布时间:2024-09-19 21:51:58 人浏览
摘要

第一种结构:图片是子元素 1 2 3 div img src=引入图片地址 alt= class=Img /div 方法一:img元素添加 object-fit:cover 1 2 3 4 5 6 7 8 9 div{ width: 500px; height: 500px; } .Img{ width: 100%; height: 100%; object-fit:cover; } 方法

第一种结构:图片是子元素

1

2

3

<div>

        <img src="引入图片地址" alt="" class="Img">

</div>

方法一:img元素添加 object-fit:cover

1

2

3

4

5

6

7

8

9

div{

  width: 500px;

  height: 500px;

}

.Img{

    width: 100%;

    height: 100%;

    object-fit:cover;

}

方法二:img元素垂直居中,最小宽高都设置为满屏

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

div{

    width: 500px;

    height: 500px;

    position:relative;

    overflow:hidden;

    }

.Img{

    position: absolute;

    top: 50%;

    left: 50%;

    display: block;

    min-width: 100%;

    min-height: 100%;

    transform:translate(-50%,-50%);

}

第二种结构:图片是背景图片

1

<div class="container"></div>

方法:div元素添加 background-size: cover;设置图片为不重复no-repeat

1

2

3

4

5

6

7

.container{

                height: 500px;

                width: 500px;

                margin: 0px auto;

                background: url('../Status/img/health.png') no-repeat;

                background-size: cover;

            }


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计