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. python web连接mysql数据库

    一定要commit,否则数据库不会发生改变!!! 1.使用python写入内容到数据库 import pymysql # 记得下载并引入pymysql # 1.连接mysql,db:声明数据库 con ...

  2. Golang微服务框架go-kratos分析：框架架构分析

    一.kratos设计理念 这里主要讲解 kratos v2 的设计理念. kratos 框架制定接口规范,然后通过插件来实现具体需求,实现自由定制.可插拔的微服务框架. 我们既可以选择 kratos ...

  3. 我的第一个项目(八):(解决问题)图片资源无法加载(Error: Cannot find module "../../xxx" )

    好家伙,问题一堆   先开一个测试页模拟游戏模块的运行 原先的图片初始化方法失效了,(vue里面自然是用不了这种方法的) function createImage(src) { let img; if ...

  4. DataGear 制作Excel动态数据可视化图表

    DataGear 4.1.0 版本增强了Excel数据集功能,新增了[工作表名称]项,并且支持填写参数化语法内容,使得可基于Excel多工作表,构建动态数据可视化图表. 本文以某商品三个地区的各季度销 ...

  5. [Linux] 无显示器 无键盘 网线直连传输文件

    有显示器可以操作 这种情况下要简单的多,基本思想是,网线直连之后让其中一方当作网关,分配好ip地址,比如说192.168.8.1,网关也是192.168.8.1即可,如果要填写子网掩码就写255.25 ...

  6. C#实现图片对比

    前言 虽然已经正式转JAVA了,但最近发现一个特别好的开源项目masuit,不仅提供很多简便的功能,还有图像的一些特殊操作功能. 下面就实现一个简单图像对比. 实现对比 代码如下,实现一个可以对比翻转 ...

  7. Java 异常处理(2) ： 方法重写的规则之一：

    1 package com.bytezero.throwable; 2 3 import java.io.FileNotFoundException; 4 import java.io.IOExcep ...

  8. Git 常用的基础命令

    #克隆项目到本地.url:项目的git地址:local_dir_name:克隆项目到本地的目录名称,如果不写就默认是git项目中的目录名称 git clone <url> <loca ...

  9. SSRF概述

    SSRF(service side request forgery) 1.攻击的目标: 从外网无法访问的内部系统 2.形成的原因: 大部分是由服务器端提供了从其他服务器应用获取数据的功能.且没有对目标 ...

  10. 软件icon制作流程，就一张256-256的图即可，一键生成windows所有格式

    软件icon制作流程,就一张256-256的图即可,一键生成windows所有格式 好久不用这个都有些生疏了,还特意做了好几个尺寸的图,结果白弄了,软件会自动生成. 1.准备256-256px的图 2 ...