1 .img{

 2     position: absolute;

 3     background:url("../images/success.png") no-repeat;

 4     width: 80px;

 5     height: 80px;

 6     top:50%;

 7     left:50%;

 8     background-size: 100% 100%;

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

10 }

注意：图片所在的div盒子一定是有确定的大小。

然后用这个：

background-size: 100% 100%;
实现图片大小自适应
 

CSS设置图片根据div的大小等比例缩放的更多相关文章

  1. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  2. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  3. 设置图片自适应DIV大小

    可以利用CSS样式表中表示后代的复合选择器进行设置.例: <head> <style type="text/css"> #right img /*设定box ...

  4. css实现图片在div中居中的效果

    利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 结构代码同上: css代码如下: div {width:300px; height:150px; paddin ...

  5. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  6. 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等

    1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...

  7. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  8. css设置图片水平及垂直居中

    .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...

  9. 用css实现图片在div内的垂直居中

    已知一个div内有一个img,两者的高度均不知道,但图片的高度一定小于div的高度 代码如下: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell;  ...

  10. css让不同大小的图片适应div的大小，且不变形。

    做成背景图片 单个 .imgdiv { width: 100px; // 你要的正方形 height: 100px; // 你要的正方形 background-image: url(/your/ima ...

随机推荐

  1. 《深入理解Java虚拟机》(二) GC 垃圾回收机制

    @ 目录 一.概述 二.判断对象是否需要被回收方式 1.引用计数法: 2.可达性分析法: 三.垃圾收集算法 1.分代收集理论基础 2.标记-清除算法 3.复制-收集算法 4.标记-压缩(整理)算法 5 ...

  2. QT - Day 1

    Date: 2021/3/12开始学习 教程视频: QT基本介绍: 跨平台图形界面引擎 优点  跨平台 接口简单,容易上手 一定程度上简化了内存回收 创建第一个QT程序  点击创建项目后,选择项目路径 ...

  3. 2021-10-11 vue的第三方组件二次封装

    原理 v-bind="$attrs"继承所有属性和props. v-on="$listeners"继承所有的方法. <template> <d ...

  4. FileBeat简单使用

    简介 首先要了解ELK架构 这种结构因为需要在各个服务器上部署 Logstash,而它比较消耗 CPU 和内存资源,所以比较适合计算资源丰富的服务器,否则容易造成服务器性能下降,甚至可能导致无法正常工 ...

  5. day05---系统的重要文件(3)

    1) /usr/local 编辑 安装的软件 第三方软件安装位置 软件安装的三种方法 1.yum安装 自动解决依赖问题 yum [选项参数] 包名 第一个里程碑:我想要安装的软件的名字 或者是 知道命 ...

  6. dilb安装的三种方法

    dilb库安装失败,源码安装嘎嘎报错,所以这里记录一下 dlib库是一个很特殊的库,在下载dlib库之前需要下载两个库(cmake.boost这两个库) pip install cmake boost ...

  7. 50条MAUI踩坑记

    1. 目录结构: (1)_imports.razor是一个全局using namespace的地方 (2)Platforms下的代码,虽然都放在同一个项目下,但是Platforms\Android下的 ...

  8. [MAUI 项目实战] 音乐播放器（二）：播放内核

    播放控制服务 IMusicControlService: 播放控制类,用于当前平台播放器对象的操作,对当前所播放曲目的暂停/播放,下一首/上一首,快进快退(寻迹),随机.单曲模式等功能的控制. 播放控 ...

  9. 5-事件组&任务通知

    获取某个事件 获取若干事件中的某个事件 获取若干事件中的全部事件 !!!!不可获得若干事件中的几个事件 创建事件组,设置事件,等待事件 static EventGroupHandle_t xEvent ...

  10. 单词本z launch = to throw 相关词根 lanc ject jac jet bol bl bal mit miss cast

    launch = to throw 词根 launc = lanc = to throw 表示 to throw 的词根有三组 拉丁语的lanc/launc,sip 拉丁语的ject, jac(jet ...