CSS

.wrap{width:100vw;height:100vh;background: rgba(0,0,0,0.3);position: fixed;top:0;left:0;text-align: center;}
.wrap img{vertical-align: middle;max-height: 90vh;max-width: 90vw;}
.wrap:after {display: inline-block;content: '';width: 0;height: 100%;vertical-align: middle;}

 html

        <div class="wrap"> 
       <img src="timg.jpg" alt="" />
        </div>

vw, vh视区覆盖和自适应图片的更多相关文章

  1. 视区相关单位vw, vh..简介以及可实际应用场景

    这篇文章发布于 2012年09月24日,星期一,01:15,归类于 css相关. 阅读 37012 次, 今日 12 次 by zhangxinxu from http://www.zhangxinx ...

  2. 视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭

    一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰 ...

  3. css3自适应布局单位vw,vh详解

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  4. css3自适应布局单位vw,vh

    css3自适应布局单位vw,vh 一.总结 一句话总结: vw和vh都是视图单位,分别为视图宽高的1% 1.vh/vw与%区别? %是相对于父元素,vh和vw是相对于视图高宽 % 百分比,相对长度单位 ...

  5. CSS3自适应字体大小(vw vh)

    viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewpor ...

  6. css3自适应布局单位vw,vh你知道多少？

    视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...

  7. [转]css3自适应布局单位vw,vh你知道多少？

    原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的 ...

  8. 【学习笔记】响应式布局的常用解决方案（媒体查询、百分比、rem、和vw/vh）

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  9. 图片流量节省大杀器：基于CDN的sharpP自适应图片技术实践

    版权声明:本文由陈忱原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/156 来源:腾云阁 https://www.qclou ...

随机推荐

  1. c——根据天数输出日期

    <c语言程序设计>(第三版)何钦铭 P190 #include<stdio.h> void month_day(int year,int yearday,int *pmonth ...

  2. 开发中经常遇到SVN清理失败的问题：

    开发中经常遇到SVN清理失败的问题: 解决方法: step1: 到 sqlite官网 https://www.sqlite.org/download.html 下载 sqlite3.exe       ...

  3. git 错误汇总

    ★一.git提交时报错:Updates were rejected because the tip of your current branch is behind 出现这样的问题是由于:自己当前版本 ...

  4. 项目管理软件 GanttProject 节日表

    项目管理软件 GanttProject 节日表 GanttProject 是一款项目管理软件,对比一些商业项目管理软件一点不差,有些还更强大,比如以下的节假日自动选择. 文件地址在:C:\Progra ...

  5. Centos7.4安装配置haproxy和Keepalived补充内容

    补充比较杂 1.当master服务恢复正常之后,backup机器收到消息,然后让出vip 下面是master机器服务恢复正常后,backup机器的Keepalived日志 收到master的消息通知, ...

  6. 【C++】atof()

    转自:https://blog.csdn.net/zhaoyl03/article/details/8176387 atof 是ascII to float的缩写,它将ascII字符串转换为相应的单精 ...

  7. 【python】dist-packages和site-packages的区别

    一.dist-packages和site-packages的区别 sudo apt-get install 安装的package存放在/usr/lib/python2./dist-packages目录 ...

  8. [转][C#]程序的动态编译

    转自:https://blog.csdn.net/clb929/article/details/51385399 附 文件下载

  9. 知识点：Mysql 基本用法之函数

    函数 MySQL中提供了许多内置函数 例如: sql 内置函数: 一.数学函数 ROUND(x,y) 返回参数x的四舍五入的有y位小数的值 RAND() 返回0到1内的随机值,可以通过提供一个参数(种 ...

  10. 5、Zookeeper命令操作

    一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他们大多数是查询命令,用来获取Zookeeper服务的当前状态及相关信息.用户在客户端可以通过telnet或n ...