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. CSS加JS实现网页返回顶部功能

    最近在设计自己的博客,前端页面在内容很多的时候往下拖动会有滚动条.通常我们都需要一个返回顶部的功能来实现快速来到网页顶部.当然实现方式不止一种,这里我采用的最实用的一种.使用CSS+Jquery方式 ...

  2. pyhotn3.8 apt机器基础镜像构建

    FROM python:3.8.10-slim RUN sed -i 's/deb.debian.org/mirrors.tuna.tsinghua.edu.cn/g' /etc/apt/source ...

  3. win32 - 使用LookupAccountName查找SID

    可以使用LookupAccountNameA获取sid. LookupAccountName函数接受系统名称和帐户作为输入.它检索该帐户的安全标识符(SID)以及在其上找到该帐户的域的名称. 使用此a ...

  4. CSDN的Markdown编辑器使用说明

    这里写自定义目录标题 欢迎使用Markdown编辑器 新的改变 功能快捷键 合理的创建标题,有助于目录的生成 如何改变文本的样式 插入链接与图片 如何插入一段漂亮的代码片 生成一个适合你的列表 创建一 ...

  5. live555开发笔记(一):live555介绍、windows上msvc2017编译和工程模板

    前言   在pc上搭建流媒体服务器软件,打开视频接受推流,使用live555方案.   live555介绍   Live555是一个为流媒体提供解决方案的跨平台的C++开源项目,它实现了标准流媒体传输 ...

  6. django中使用redis管道

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

  7. Ubuntu如何卸载mysql

    首先在终端中查看MySQL的依赖项:dpkg --list|grep mysql 卸载: sudo apt-get remove mysql-common 卸载:sudo apt-get autore ...

  8. Taurus.MVC WebMVC 入门开发教程5:表单提交与数据验证

    前言: 在本篇 Taurus.MVC WebMVC 入门开发教程的第五篇文章中,我们将学习如何处理表单提交和进行数据验证. 这是 Web 开发中非常重要的一部分,因为它涉及到用户输入数据的处理和有效性 ...

  9. 【Azure Redis 缓存】Azure Redis 遇见的连接不上问题和数据丢失的情况解答

    问题描述 PHP应用再连接Azure Redis服务时,出现Connection Timed out.当通过升级提高Azure Redis的性能时候,发现之前的数据丢失了. 问题解答 当Redis服务 ...

  10. 轻量级NuGet—BaGet

    1. 介绍 BaGet是一个轻量级的包管理服务.有些时候公司或者个人不希望某一些包进行公开,那么就需要使用私有的包管理服务程序,该服务是用.netcore进行编写的(感谢开发者为社区做出的共享) Gi ...