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. C++ 将filesystem::path转换为const BYTE*

    std::string s = fs::temp_directory_path().append(filename).string(); LPCBYTE str = reinterpret_cast& ...

  2. django中如果不是第一次迁移的时候就配置AUTH_USER_MODEL(用来告知django认证系统识别我们自定义的模型类)，那么该如何解决才能让django的认证系统识别且不会报未知错误？

    Django认证系统中提供的用户模型类及方法很方便,我们可以使用这个模型类,但是字段有些无法满足项目需求,如还需要保存用户的手机号,需要给模型类添加额外的字段. Django提供了django.con ...

  3. .NET 链接数据库：证书链是由不受信任的颁发机构颁发的

    错误信息 证书链是由不受信任的颁发机构颁发的 错误环境 .NET web.config链接数据库(发布到服务)时报错 解决方法 下面配置标红部分在你的代码配置中增加或者修改 <add name= ...

  4. 【Azure 应用服务】App Service多个部署槽(Slot)之间，设置Traffic百分比后，如何来判断请求是由那一个槽(Slot)来进行处理呢？

    问题描述 当我们部署应用到App Service后,为了实现对生成的最小影响,通常是把新版本部署在一个预生产的槽中,然后进行验证.另一方面,为了进行A/B验证,需要把生成槽的流量,切入一部分到预生产槽 ...

  5. 分布式事务框架seata入门

    一.简介 在近几年流行的微服务架构中,由于对服务和数据库进行了拆分,原来的一个单进程本地事务变成多个进程的本地事务,这时要保证数据的一致性,就需要用到分布式事务了.分布式事务的解决方案有很多,其中国内 ...

  6. 如何实现十亿级离线 CSV 导入 Nebula Graph

    本文首发于 Nebula Graph Community 公众号 本次实践是基于业务需求及后续扩展,通过技术选型确定了 Nebula Graph 图数据库,首先需要验证 Nebula Graph 数据 ...

  7. 理解LLMOps: Large Language Model Operations

    理解LLMOps: Large Language Model Operations 对于像我一样的小白来说,本文是一篇非常不错的LLMs入门介绍文档.来自:Understanding LLMOps: ...

  8. 巧用SQL语句中的OR查询完成业务新需求-2022新项目

    一.业务场景 目前参与开发的项目,之前的一个已上线的版本中有一类查询是根据两张表进行LEFT JOIN查询用来取数据, 主表中有一个字段field用来区分不同的数据类型比如说A/B/C.前面的版本中只 ...

  9. linux 无法找到“/usr/bin/core_perl/gcc” vscode

    解决问题的思路 查看有没有gcc,没有安装 有的话就是,修改安装路径就可以? "/usr/bin/core_perl/gcc".修改成Gcc的绝对路径 我的修改是./usr/bin ...

  10. 从一线方案商的角度来看高通QCC3020芯片

    写在前面的话   QCC3020的推出已经有一段时间了.在蓝牙音频的圈子里,属于家喻户晓的芯片了.再加上高通的大力宣传和一些顶尖级产品的使用,可以说,它是高通在吸收CSR的技术之后,着力推出的最具竞争 ...