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. python要开始记录了20181125

    print('1.使用while循环输入 1 2 3 4 5 6 8 9 10') i = 1 while i < 10: i += 1 if i == 7: continue #print(' ...

  2. hdu5000 Clone dp+大数

    After eating food from Chernobyl, DRD got a super power: he could clone himself right now! He used t ...

  3. websocket 心跳重连

    websocket 的基本使用: var ws = new WebSocket(url); ws.onclose = function () { //something reconnect(); // ...

  4. 开源WHMCS支付宝当面付和即时到账插件

    开源WHMCS支付宝当面付和即时到账插件 链接: https://pan.baidu.com/s/1i5HU4hn 密码: crq7

  5. Go Example--格式化字符串

    package main import ( "fmt" "os" ) type point struct { x, y int } func main() { ...

  6. day053 url反向解析图解 模板渲染

    一.语法 两种特殊符号(语法): {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二.变量 1. 可直接用  {{ 变量名 }} (可调用字符串, 数字 ,列表,字典,对象等) ...

  7. 支付宝 生活号 获取 userId 和 生活号支付

    第一:申请生活号. 第二:激活开发者 模式 ,并且上创 自己的 公钥  ( 支付宝 demo 里面有 ) 第三: 配置 回调地址 ( 用于前端 调用获取 auth_code 的时候 填写的回调地址,支 ...

  8. 分享一个生成反遗忘复习计划的java程序

    想必这个曲线大家都认识,这是遗忘曲线,展示人的记忆会随着时间的延长慢慢遗忘的规律,同时还展示了如果我们过一段时间复习一次对遗忘的有利影响. 道理大家都懂,关键怎么做到? 靠在本子上记下今天我该复习哪一 ...

  9. django的forms认证组件

    django的forms认证组件 每个网站的注册界面都需要有相应的"认证"功能,比如说认证注册页面的用户名是否已被注册,二次输入的密码是否一致以及认证用户输入的用户名.邮箱.手机号 ...

  10. C#将对象序列化成JSON字符串

    C#将对象序列化成JSON字符串 public string GetJsonString() { List<Product> products = new List<Product& ...