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. Android SDK的下载与安装

    一.Android SDK简介 Android SDK(Software Development Kit,软件开发工具包)被软件开发工程师用于为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件 ...

  2. 2019西湖论剑网络安全技能大赛（大学生组）--奇怪的TTL字段（补充）

    鉴于有人不会将得到的16进制数据在winhex中转成图片,我在这里写一个详细的步骤. 首先就是将六张图片的十六进制数据找出并提取出来. 打开winhex,新建一个文档. 大小可以选1bytes 将数据 ...

  3. mongodb分片balance

    查看balance状态 mongos> sh.getBalancerState()true   通过balance锁查看balance活动 如果state是2,表示balance锁已经被获取 m ...

  4. java_oop_方法2

    基本和引用数据类型    存储方式    数据类型总结 jvm运行时数据区域        方法区        虚拟机栈!        本地方法栈        堆!        程序计数器 虚 ...

  5. fges

    基本用法: fgets函数用来从文件中读入字符串.fgets函数的调用形式如下:fgets(str,n,fp):此处,fp是文件指针:str是存放在字符串的起始地址:n是一个int类型变量.函数的功能 ...

  6. icomoon：生成字体图标的方法并应用

    字体图标任意缩放不会失真,也大大减少请求数量,非常好用. 在线生成工具:https://icomoon.io/app/#/select 在线SVG图库(阿里),  用于导入:http://www.ic ...

  7. python修改字典的值(update map value)

    mydict.update({'newkey':'newvalue'})

  8. Vista的MBR磁盘签名（Disk Signature） （转帖）

    原帖:Vista的MBR磁盘签名(Disk Signature)_存梦_新浪博客 http://blog.sina.com.cn/s/blog_6fed14220100qq71.html 存梦发表于( ...

  9. 铁板纹理 Base Shape

    软件:Substance Designer 2017.1.2 最近正在根据官方的教程,学习Metal Rust纹理的制作.这篇文章仅记录Base Shape的制作方法. Base Shape最终渲染效 ...

  10. 20165312 2017-2018-2 《JAVA程序设计》第4周学习总结

    一.课本五六章知识点总结 1.第五章 继承是一种由已有的类创建新类的机制 子类继承父类的成员变量和方法 子类继承的方法只能操作子类继承和隐藏的成员变量 子类重写或新增的方法只能操作子类继承和新声明的成 ...