<!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. eclipse手动添加SVN插件

    最近使用eclipse时,用help下自动下载更新svn总是出错,网上找到手动安装方法,记录下一种可行的 1.手动下载svn插件(百度SVNsite-1.8.18) 2.将下载好的SVNsite-1. ...

  2. HTTPS GET | POST | DELETE 请求

    依赖: <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okhttp& ...

  3. 图数据库 Nebula Graph 是什么

    图数据库(英语:Graph Database)是一个使用图结构进行语义查询的数据库.该系统的关键概念是图,形式上是点 (Node 或者 Vertex) 和边 (Edge 或者 Relationship ...

  4. 设计模式之GOF23中介者模式

    中介者模式Mediator 场景:公司中各个部门需要交互,通过中介总经理进行交互 核心: 如果一个系统中对象之间的联系成网状结构,对象之间多对多,将导致关系极其复杂,这些对象统称为“同事关系” 我们可 ...

  5. [csu1605]数独（精确覆盖问题）

    题意 :给定数独的某些初始值,规定每个格子的得分,求得分最大的数独的解. 思路:这是某年的noip的原题,高中时就写过,位运算也就是那个时候学会的--.这题明显是暴搜,但是需要注意两点,一是需要加一些 ...

  6. requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式

    用js来实现动画,我们一般是借助setTimeout或setInterval这两个函数,css3动画出来后,我们又可以使用css3来实现动画了,而且性能和流畅度也得到了很大的提升.但是css3动画还是 ...

  7. Java元注解@Retention规则

    @Retention是java当中的一个元注解,该元注解通常都是用于对软件的测试 1.适用方式:     @Retention(RetentionPolicy.RUNTIME)     @interf ...

  8. python爬虫-直播吧

    概述 这是一个我很喜欢的小网站,想了解这个网站先从爬虫开始,爬取直播吧所有的栏目及内容,再存入数据库.先写个简单点的,后期再不断的优化下. 准备阶段 直播吧网址https://www.zhibo8.c ...

  9. Win32 Sdk 连接Access数据库

    /************************************************************* *** MyWinClass.cpp 创建窗口模板 *** vs2017+ ...

  10. SpringMvc上传图片及表单提交（单文件+实体类参数提交）

    前两天做项目用到了Springmvc的文件上传来上传图片,由于和这个普通的Java文件上传处理流程不太一样,所以做的时候碰了壁,一顿百度,博客,要不就是一部分代码,要不就是看不懂,用不会的代码,下面来 ...