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

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(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • css实现四角边框效果介绍

    css实现四角边框效果介绍
    css实现四角边框 html: 1 2 3 4 5 6 7 8 div class=box v-for=(item, index) in coldBaseInfo.stationModelList :key=index div class=boxleft img :src=photo[index] alt=Image / /div
  • CSS图片铺满div的实现方法
    第一种结构:图片是子元素 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; heigh
  • css边框修饰的实现

    css边框修饰的实现
    一、设置线条样式 通过border-style属性设置,可选择的一些属性如下: dotted:点线 dashed:虚线 solid:实线 double:双实线 效果如下: 二、设
  • CSS中:required和:optional伪类:增强表单字段的视觉
    在网页设计中,表单是用户与网站交互的重要元素之一。为了提升用户体验并引导用户正确填写表单,开发者需要清晰地标识出哪些字段是
  • 使用CSS3进行样式效果增强
    使用CSS3进行增强 滑过文字渐变 1 2 3 4 5 6 /* 这段代码实现了当鼠标滑过链接时的渐变效果 */ a { color: #007c21; transition: color .4s ease; } a:hover {
  • 利用CSS实现视差滚动和抖动效果

    利用CSS实现视差滚动和抖动效果
    前端的设计效果,越来越炫酷,而这些炫酷的效果,利用css3的动画效果和js就可以实现,简单的代码就能实现非常炫酷的效果。 原理:利用
  • CSS文本超出后隐藏并显示省略号及其他浏览器兼
    1、只显示一行文字后隐藏并省略 1 2 3 4 5 6 7 // 只显示一行文字后省略 .element { width: 300px; /* 需要设置一个固定宽度 */ white-space: nowrap; /* 强制
  • css3实现动态滚动播放列表功能

    css3实现动态滚动播放列表功能
    需要自动滚动循环播放的列表,使用纯CSS实现基础循环功能 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .messages animation-name carousel animation-timing-
  • CSS3边框样式(包含border-radius、border-image与box-sha

    CSS3边框样式(包含border-radius、border-image与box-sha
    CSS3 边框样式 border-radius 作用:设置圆角 值的个数及其效果 简记:左上开始顺时针,值不够的对角来凑。 值的个数 效果 1 四个角一致 2 左
  • CSS3动画实现多个跳动小球效果(语音输入动画)

    CSS3动画实现多个跳动小球效果(语音输入动画)
    VUE使用CSS3动画实现多个跳动小球(语音输入动画) 之前实习期间,有做过一个需求,安卓端嵌H5页面,实现语音输入并包含输入时动画,跳
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计