<!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. 跟哥一起学python（3）- 理解“变量”

    我们把前面的程序稍微改一下,来了解python中的变量. # file: ./4/4_1.py # 定义变量 hello_str = "hello, world!" # 字符串打印 ...

  2. kafka-eagle监控kafka

    最近想做一个kafka监控,本来准备用zabbix来监控的,需要重复造轮子,本来准备用kafka-Manager的,在GitHub上无意发现了kafka-eagle,看了官方介绍准备试一下..... ...

  3. socket编程之时间回射服务器

    使用到的函数: // 返回值:读到的字节数,若已到文件尾,返回0:若出错,返回-1 ssize_t read(int fd, void *buf, size_t nbytes); // 返回值:若成功 ...

  4. 网络流 O - Marriage Match IV

    题目链接:https://vjudge.net/contest/299467#problem/O 题目思路:网络流+最短路 这个是一个最短路+最大流,最短路容易,就是跑起点到每一个点的距离. 但是这个 ...

  5. 【Kafka】自定义分区策略

    自定义分区策略 思路 Command+Option+shift+N 调出查询页面,找到producer包的Partitioner接口 Partitioner下有一个DefaultPartitioner ...

  6. vue项目-打印页面中指定区域的内容（亲测有效！）

    关于打印整个页面的,没什么好说的.今天我给大家分享一个打印指定区域的方法,你想打印哪里,就打印哪里! 我也是刚刚开始接触打印这一块功能的,然后当然是找度娘深入了解了一番啦,期间试了网上的各种方法,有的 ...

  7. IDEA打包JavaWeb项目

    IDEA打包JavaWeb项目 步骤: 1.配置项目->2.Build Artifacts->3.找到.war文件 具体操作: 首先,单击顶部工具栏的“File”选项,在弹出选项中选择“P ...

  8. 设计模式之GOF23原型模式01

    原型模式prototype 原型模式: - 通过new产生一个对象需要非常繁琐的数据准备或者访问权限,则可以使用原型模式,比如如果new对象所需时间过长,可以通过克隆产生相同的副本 - Java中的克 ...

  9. [hdu4911]逆序对相关

    思路:由于只能交换相邻的数,所以每次最多减小1个逆序对(且如果存在逆序对那么肯定可以减小1个)!于是乎..就是统计逆序对的裸题了.树状数组或归并都行. #pragma comment(linker, ...

  10. [zoj3629]找规律

    题意:a[n] = ([n/1] + [n/2] + ... + [n/n]) & 1 == false,找出a数组的规律来就ok了. #pragma comment(linker, &quo ...