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. websocket 监听端口问题

    有用户反馈使用我们的软件时会出现 ERR_CONNECTION_CLOSED 问题 我们根据反馈排查问题发现是软件的 websocket 监听端口被另一款软件占用了,暂时的解决方法是将占用的软件关闭 ...

  2. typing模块中Protocol协议的使用

    说明 在 Python 的 typing 模块中,Protocol 是一个用于定义协议(Protocol)的类. 协议是一种形式化的接口,定义了一组方法或属性的规范,而不关心具体的实现.Protoco ...

  3. 【LeetCode栈与队列#04】逆波兰表达式求值（仍然是经典的栈操作）

    逆波兰表达式求值 力扣题目链接(opens new window) 根据 逆波兰表示法,求表达式的值. 有效的运算符包括 + , - , * , / .每个运算对象可以是整数,也可以是另一个逆波兰表达 ...

  4. 第129篇:JS模块化开发

    好家伙,本篇为<JS高级程序设计>第二十六章"模块"学习笔记 JS开发会遇到代码量大和广泛使用第三方库的问题. 解决这个问题的方案通 常需要把代码拆分成很多部分,然后再 ...

  5. 【Azure 应用服务】使用App Service for Linux/Container时，如果代码或Container启动耗时大于了230秒，默认会启动失败。

    问题描述 使用App Service for Linux/Container时,从Docker的日志中,我们可以看见有 warmup 行为,而此行为默认时间为230秒,如果超出了这个时间,就会导致Co ...

  6. 如何使用 perf 分析 splice 中 pipe 的容量变化

    如何使用 perf 分析 splice 中 pipe 的容量变化 这个文章为了填上一篇文章的坑的,跟踪内核函数本来是准备使用 ebpf 的,但是涉及到了低内核版本,只能使用 kprobe 了. 恰好, ...

  7. vue3自定义Hooks

    比较简单的小demo,直接上代码吧 ts使用defineComponent,setup()里面使用 Composition API 写法,逻辑块清晰,不用前后文查找,拒绝 spaghetti code ...

  8. ansible 自动化运维（1）

      ansible 简介 ansible 是什么? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.chef.func.fabric)的优点,实现了批量 ...

  9. java.lang.Long cannot be cast to java.util.Map-Oracle查询异常处理

    Map<String, Object> map一.问题由来 测试环境中进行测试时,某一个接口频繁报一个错,java.lang.Long cannot be cast to java.uti ...

  10. Nginx安装nginx-rtmp-module模块

    简介 nginx中的模块虽然就是类似插件的概念,但是它无法像VsCode那样轻松的安装扩展. nginx要安装其它模块必须同时拿到nginx源代码和模块源代码,然后手动编译,将模块打到nginx中,最 ...