<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        *{

            margin: 0px;

            padding:0px;

        }

        html,body{

            height:100%;

            text-align: center;

        }

        body:after{

            content: "";

            display: inline-block;

            height:100%;

            vertical-align: middle;

            text-align: center;

        }

        img{

            vertical-align: middle;

            -webkit-box-reflect: left 10px;

            overflow: auto;

        }

        .test{

            text-align: left;

            text-indent:32px;

            display: inline-block;

            width:300px;

            height:300px;

            margin:auto;

            vertical-align: middle;

            background-color: pink;

        }

    </style>

</head>

<body>

<img class="test" src="../img/test.jpg" width="200px"/>

</body>

</html>

img 只定义宽度（或者制定一高度，图片会等比缩放），指定高度和宽度会出现拉伸，图片的居中可以决定定为，也可以使用同级的 after 属性设置样式：代码如下

:after{

            content: "";

            display: inline-block;

            height:100%;

            vertical-align: middle;

            text-align: center;

 }

效果： 先居中，再向左倒影

css 图片宽度、居中、倒影的更多相关文章

  1. css 图片文字居中

    1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...

  2. CSS图片宽度设置百分比 , 高度同宽度相同

    在图片长宽不相等的情况下,想将长宽设置为相等并且自适应屏幕,可以通过 js 的方式进行设置并通过监听 resize 来实时更新,但是这种方式很麻烦. 这里通过 css 来达到我们想要的效果: < ...

  3. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  4. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  5. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  6. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  7. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  8. div css 图片和文字上下居中对齐

    想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...

  9. div css 伪类 不固定图片大小 居中， css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

随机推荐

  1. TestNG测试用例重跑详解及实践优化

    测试用例运行稳定性是自动化质量的一个重要指标,在运行中需要尽可能的剔除非bug造成的测试用例执行失败,对于失败用例进行重跑是常用策略之一.一种重跑策略是所有用例运行结束后对失败用例重跑,另一种重跑策略 ...

  2. js获取对象属性的两种方法，object.属性名，[‘属性名’ ]

    1.通过点的方式 2.通过括号的方式 例: <input type="text" value="hello" id="text"/&g ...

  3. Cassandra 简介

    Cassandra是云原生和微服务化场景中最好的NoSQL数据库.我信了~ 1. Cassandra是什么 高可用性和可扩展的分布式数据库 Apache Cassandra™是一个开源分布式数据,可提 ...

  4. Autohotkey心得

    玩游戏,烧钱和作弊是永恒的话题,热键一定程度上和作弊相关.办公用数据库.编程.商业智能,一定程度上也是作弊,欺负没有相关信息技术的公司.个人. 避免和输入法产生冲突,少用Send,多用剪切板中转. E ...

  5. js移动端复制到剪贴板

    // 复制到剪切板 function copy(str){ var save = function (e){ e.clipboardData.setData('text/plain',str);//c ...

  6. centos下mysql 看不到mysql数据库（密码无法更改）

    1.这可能是因为mysql数据库的user表里,存在用户名为空的账户即匿名账户,导致登录的时候是虽然用的是root,但实际是匿名登录的 2.解决方案 2.1.关闭mysql service mysql ...

  7. Hadoop 集群搭建和维护文档

    一.前言 -- 基础环境准备 节点名称 IP NN DN JNN ZKFC ZK RM NM Master Worker master1 192.168.8.106 * * * * * * maste ...

  8. 【SMB源码解析系列】——003.SMB游戏基本框架

    前面有了解到RESET中断相关代码,结尾处通过一句jmp进入了无限循环,之后CPU将会在每一帧PUU进入VBlank状态时,接收NMI中断信号, 跳转至NMI代码处继续执行,直到遇见RTI指令时又返回 ...

  9. 力扣题解-LCP 06. 拿硬币

    题目描述 桌上有 n 堆力扣币,每堆的数量保存在数组 coins 中.我们每次可以选择任意一堆,拿走其中的一枚或者两枚,求拿完所有力扣币的最少次数. 示例 1: 输入:[4,2,1] 输出:4 解释: ...

  10. python实现简易词频统计-源码

    需求:给瓦尔登湖文章统计单词出现的频率 思路:首先读取文件并以空格分割得到列表,然后利用for循环遍历列表中的元素并把去掉列表元素中的符号,第三步去掉相同的元素,将列表转换为一个字典,最后按照键值对升 ...