直接上代码了

<div class="showpic">
<span></span>
<img src="" alt="">
</div>

样式

.showpic {
font-size: 0;
position: fixed;
top: 0;
width: 100%;
height: 100%;
left: 0;
background: #4d4d4d;
z-index: 999;
text-align: center;
display: none;
}
.showpic span {
height: 100%;
display: inline-block;
vertical-align: middle;
}
.showpic img {
vertical-align: middle;
max-height: 100%;
z-index: 999;
max-width: 100%;
display: inline-block;
}

css让图片居中显示在手机屏幕上的更多相关文章

  1. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  2. css图片居中,通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

  3. Droid@screen:在PC屏幕上显示Android手机屏幕

    这里介绍一款工具——Droid@screen,用来获取手机屏幕,显示在PC屏幕上.它集截图.录像等多种功能于一体. 安装 1.    下载地址:http://droid-at-screen.org/d ...

  4. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  5. css 字体上下居中显示 解决安卓手机line-height的偏差

      1.字体左右居中显示 text-align: center   <div class="font"> 上下居中 </div> .font{ width: ...

  6. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  7. extjs中grid中行内文本或图片居中显示

    我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...

  8. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  9. HTML+Css让网页自动适应电脑手机屏幕

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

随机推荐

  1. AFNetworking实现 断点续传

    用AFNetworking实现断点续传,暂停,继续   AFNetworking断点续传暂停恢复 AFNetworking的版本:platform:ios,'7.0' pod "AFNetw ...

  2. Codeforces 486D D. Valid Sets

    http://codeforces.com/contest/486/problem/D 题意:给定一棵树,点上有权值,以及d,要求有多少种联通块满足最大值减最小值小于等于d. 思路:枚举i作为最大的点 ...

  3. HEX转BIN源码分析(51系列)

    以前写的一个Atmel的S5X的下载程序,其中有支持HEX格式的文件,所以将这个程序贴出来,程序的意思是将输入的HEX文件转换为BIN格式的文件,并存储到文件中,注意不支持64K的扩展模式. int ...

  4. Berserk Rook

    Berserk Rook As you may know, chess is an ancient game for which almost everyone has at least a basi ...

  5. The square chest

    The square chest Sophia pressed the button in front of her, slamming her fist against it. The door r ...

  6. [置顶] Android学习系列-Android中解析xml(7)

    Android学习系列-Android中解析xml(7) 一,概述 1,一个是DOM,它是生成一个树,有了树以后你搜索.查找都可以做. 2,另一种是基于流的,就是解析器从头到尾解析一遍xml文件.   ...

  7. VM虚拟机安装苹果雪豹操作系统

    1.win xp虚拟机安装Mac OSX 一.用VM8安装mac os x10.6 ,然后升级到的10.6.8,如何安装vm大家自己百度吧.这里指列出了如何安装雪豹操作系统. DMG是mac os x ...

  8. C# WEB API ApiController 修改response header contentType

    var res = Request.CreateResponse(HttpStatusCode.OK, file); res.Content.Headers.ContentType = new Med ...

  9. C++指针初始化总结

    1.字符指针的初始化 在c语言中 "string"保存的就是首个字符所在的地址  所以可以把 字符串常量"string" 赋值给指针 char *p;  &qu ...

  10. HDU 1540 Tunnel Warfare (线段树)

    题目大意: n 个村庄排列在一条直线上,相邻的村庄有地道连接,除首尾两个村庄外,其余村庄都有两个相邻的村庄.其中有 3 中操作 D x :表示摧毁编号为 x 的村庄,Q x:表示求出包含村庄 x 的最 ...