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. django中使用redis管道

    管道(事务),要是都成功则成功,失败一个全部失败 原理:将数据操作放在内存中,只有成功后,才会一次性全部放入redis 记住,redis中的管道可以开启事务处理,但是并没有回滚这一说法!跟mysql中 ...

  2. 对于Celery原理的简单理解

    参考博客: https://www.cnblogs.com/forward-wang/p/5970806.html https://blog.csdn.net/cuomer/article/detai ...

  3. 【LeetCode字符串#04】左旋转字符串,以及反转函数使用说明

    左旋转字符串 力扣题目链接(opens new window) 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部.请定义一个函数实现字符串左旋转操作的功能.比如,输入字符串"a ...

  4. 【Azure 事件中心】Event Hubs中存在非常多的错误数据,是否能提前删除这些数据呢?

    问题描述 因为一些特殊原因,Event Hub 里面堆积了很多不需要的数据事件,正常要等事件中的过期时间到后才有Event Hub自动删除掉,但希望能够尽快马上删除,有没有什么手动的方法吗? 问题解答 ...

  5. ClickHouse学习笔记--ClickHouse的整体特性

    本文主要包含如下内容: ClickHouse适用场景 ClickHouse缺点 ClickHouse优点 ClickHouse表引擎-合并树 ClickHouse表引擎-合并树-稀疏索引 ClickH ...

  6. 接口自动化有多少case?覆盖率是多少?执行完需要多久?

    case根据接口数量而定,比如两百个接口,大概有5000个用例,一个接口大概有25到30个用例,一个接口大概200ms左右响应时间 覆盖率能达到95%以上,有时候可以达到百分之百,所有接口自动化用例执 ...

  7. Lazada电商api接口 获取商品详情 数据采集

    iDataRiver平台 https://www.idatariver.com/zh-cn/ 提供开箱即用的Lazada电商数据采集API,供用户按需调用. 接口使用详情请参考Lazada接口文档 接 ...

  8. npm install --legacy-peer-deps 安装出现依赖包冲突的解决方案

    npm install --legacy-peer-deps 安装出现依赖包冲突的解决方案 为什么 在安装依赖包的时候,会有依赖包的冲突 比如A包引用了C的1.0版本 B包依赖了C的1.1版本 win ...

  9. [已读带总结] Effective JavaScript 编写高质量JavaScript代码的68个有效方法

    目录 电子书下载:https://www.jb51.net/books/328297.html 第2章 第11条 熟练掌握闭包 https://www.cnblogs.com/wengxuesong/ ...

  10. vue+springboot图片上传和显示

    一.前言 在使用spring boot做后台系统,vue做前端系统,给客户开发一套系统时候,其中用到了图片上传和显示的功能. 二.环境 前端:vue 前端组件:tinymce 后台:spring bo ...