直接上代码了

<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. HTML5音频

    <audio>用来播放声音文件. 案例1: <!DOCTYPE html><html><head lang="en"> <me ...

  2. 鼠标悬停移除更换class

    $("#xinl").mouseover(function()  //鼠标悬停执行函数 { $(".xl").removeClass().addClass(&q ...

  3. Django 反向生成 从数据库生成Model

    Django 反向生成 从数据库生成Model 使用Django生成Model python manage.py inspectdb或python manage.py inspectdb > m ...

  4. 将图片以Blob格式存入数据库,再通过Servlet显示到界面

    1:为了方便测试,直接将1.png图片存入到数据库中. public static void storePicBlog() throws FileNotFoundException, SQLExcep ...

  5. Quartz.net Cron表达式

    由7段构成:秒 分 时 日 月 星期 年(可选)"-" :表示范围  MON-WED表示星期一到星期三"," :表示列举 MON,WEB表示星期一和星期三&qu ...

  6. [Android]通过setImageURI设置网络上面的图片

    设置imageView显示网络上的图片 picUrl = new URL(getIntent().getExtras().getString("map_url")); Bitmap ...

  7. 【Android】使用BaseAdapter实现复杂的ListView

    步骤 使用BaseAdapter实现复杂的ListView的步骤: 1. 数据你要准备好 List getData(). 2. 继承ListActivity专有屏,不再需要setContentView ...

  8. Linux下串口编程入门

    简介: Linux操作系统从一开始就对串行口提供了很好的支持,本文就Linux下的串行口通讯编程进行简单的介绍. 串口简介  串行口是计算机一种常用的接口,具有连接线少,通讯简单,得到广泛的使用.常用 ...

  9. 页和区 sql server

    原文地址:http://msdn.microsoft.com/zh-cn/library/ms190969.aspx SQL Server 中数据存储的基本单位是页.为数据库中的数据文件(.mdf 或 ...

  10. softlayer