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. 解决：Not found the kernel library or the kernel library is invalid

    问题说明: 今天运行一个E语言写的程序报错, 看样子是缺少核心依赖库. 解决方法 去下载个易语言安装包安装一下即可.比如我安装的是: 易语言5.6完美破解版(精简版).exe 下载地址:https:/ ...

  2. DVWA XSS

    XSS Store hign level <?php if( isset( $_POST[ 'btnSign' ] ) ) { // Get input $message = trim( $_P ...

  3. Notepad++找回自动保存缓存内容的文件

    在目录C:\Users\Administrator\AppData\Roaming\Notepad++\backup中找到自动保存的缓存文件. 参考Notepad++找回自动保存缓存内容的文件

  4. 【Azure Redis 缓存】使用Azure Redis服务时候，如突然遇见异常，遇见命令Timeout performing SET xxxxxx等情况，如何第一时间查看是否有Failover存在呢？

    问题描述 使用Azure Redis服务时,如突然遇见异常,命令Timeout performing SET xxxxxx等情况,如何第一时间查看是否有Failover存在呢?看是否有进行平台的维护呢 ...

  5. 【Azure 应用服务】Azure App Service 在不配置自定义域名的情况下如何使用呢？

    问题描述 根据中国法律法规的规定及相关监管机构的要求,当使用应用服务创建应用时,须立即绑定一个已经完成ICP备案的自定义域名并通过该自定义域名访问该应用服务.任何通过Internet对应用服务默认域名 ...

  6. python代码，读取一个txt文件，将其中的每一行开头加上一个字母a,每一行的结尾加上一个字母b

    with open('name.txt', 'r+') as file: lines = file.readlines() file.seek(0) # 将文件指针移回文件开头 file.trunca ...

  7. 面试官上来就让手撕HashMap的7种遍历方式，当场愣住，最后只写出了3种

    写在开头 今天有个小伙伴私信诉苦,说面试官上来就让他手撕HashMap的7种遍历方式,最终只写出3种常用的,怀疑面试官是在故意***难.这个问题大家怎么看? 反正我个人感觉这肯定不是***难,&quo ...

  8. Vue3学习（二十一）- 文档管理页面布局修改

    写在前面 按照国际惯例,要先聊下生活,吐槽一番,今天是2月14日,也是下午听老妈说,我才知道! 现在真的是对日期节日已经毫无概念可言,只知道星期几. 现在已经觉得写博客也好,学习文章也罢,和写日记一样 ...

  9. C++ 错误 具有类型“const sort”的表达式会丢失一些 const-volatile 限定符以调用“bool sort::operator ()(int,int)” 如下：环境 vs2019 内容：set内置函数排序

    C++ 错误 具有类型"const sort"的表达式会丢失一些 const-volatile 限定符以调用"bool sort::operator ()(int,int ...

  10. Scyther 协议形式化验证翻译 (第二章)

    论文概述:$\alpha +\forall (\sum \oint_{3}^{4})$ 第二章:  操作语义 在第二章中我提出了一种新的安全协议的模型,用于定义安全协议以及协议的行为,在明确的模型中执 ...