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. Java第三次作业——面向对象基础（封装）

    Java第三次作业--面向对象基础(封装) (一)学习总结 1.什么是面向对象的封装性,Java中是如何实现封装性的?试举例说明. 封装性 封装性是面向对象的方法所应遵循的一个重要原则,它有两个含义: ...

  2. memcache 应用场景

    一..memcache应用场景 1.应用场景一: 缓解数据库压力,提高交互速度.它的一个总原则是将经常需要从数据库读取的数据缓存在memcached中.这些数据也分为几类: (1).经常被读取并且实时 ...

  3. 启动Kernel提示Bad Data CRC

    如上图,我明明将uImage正确写入到里nandflash里面,但启动但时候就是提示bad CRC. 后来我手动执行nand read kernel想看看是不是环境变量里面的命令执行有问题,意外但被我 ...

  4. struts2 自定义异常拦截器配log4j

    log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...

  5. 使用 jest 测试 react component 的配置，踩坑。

    首先安装依赖 npm i jest -g npm i jest babel-jest identity-obj-proxy enzyme enzyme-adapter-react-15.4 react ...

  6. 解决java.lang.IllegalArgumentException: No converter found for return value of type 的问题

    controller返回一个dto,并且定义了@ResponseBody注解,表示希望将这个dto对象转换为json字符串返回给前端,但是运行时报错:nested exception is java. ...

  7. Zuul 跨域

    JS访问会出现跨域问题的解决, 一.对单个接口,处理跨域,只需要在被调用的类或或方法增加注解 CoossOrigin 如下设置 allowCredenticals=true,表示运行Cookie跨域 ...

  8. 验证代理ip是否可用

    改编自:http://www.jianshu.com/p/588241a313e7 # _*_ coding:utf-8 _*_ import urllib2 import re class Test ...

  9. 单因素方差分析的SAS实现

    实验内容:某城市从4个排污口取水,进行某种处理后检测大肠杆菌数量,单位面积内菌落数如下表所示,请分析各个排污口的大肠杆菌数量是否有差别. 排污口 1 2 3 4 大肠杆菌数量 9,12,7,5 20, ...

  10. Java中常用类（包装类扩展知识）

    Java常用类有哪些? 八大基本数据类型的包装类 包装类均位于java.lang包中,包装类和基本数据类型的对应关系如下表: 基本数据类型 包装类 byte Byte boolean Boolean ...