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. 软件工程 week 04

    四则运算 一.摘要 作业地址:https://edu.cnblogs.com/campus/nenu/2016CS/homework/2266 git仓库地址:https://git.coding.n ...

  2. poj2279——Mr. Young's Picture Permutations

    Description Mr. Young wishes to take a picture of his class. The students will stand in rows with ea ...

  3. PythonStudy——函数默认值

    # 如果函数的默认参数的默认值为变量,在所属函数定义阶段一执行就被确定为当时变量存放的值 a = 100 def fn(num=a): a = 200 fn() 输出: 100 也就是说在函数调用的时 ...

  4. Django学习笔记之数据库-QuerySet_API

    QuerySet API 我们通常做查询操作的时候,都是通过模型名字.objects的方式进行操作.其实模型名字.objects是一个django.db.models.manager.Manager对 ...

  5. OkHttp官方中文文档

    https://blog.csdn.net/jackingzheng/article/details/51778793 https://www.cnblogs.com/ldq2016/p/879630 ...

  6. QQ群成员发言次数统计（正则表达式版）

    1.先将QQ群的消息记录以.txt文件格式导出来,保存路径及名称自己定义(在本文我导出到Y盘,命名为test.txt) 2.程序如下: data statistics1; if _n_=1 then ...

  7. 【ELK】之Centos6.9_x64安装elasticsearch6.2.1

    1.下载elasticsearch6.2.1 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.2.1 ...

  8. 一台电脑上配置多个tomcat同时运行

    好使 1 1.配置运行tomcat 首先要配置java的jdk环境,这个就不在写了  不懂去网上查查,这里主要介绍再jdk环境没配置好的情况下 如何配置运行多个tomcat 2.第一个tomcat: ...

  9. Java如何运行一个class文件的main方法

    假设如下目录有个class文件,并且里面有main方法: d:\workspace\eclipse\com\JavaCore\classloader\MyClassLoader.class 首先进入c ...

  10. redis学习链接收藏

    1.redis命令大全--官网 2.redis命令大全--中文翻译版 3.源码(注释版):redis3.0 4.程序代码:<redis入门指南(第二版)>第五章 5.最新的redis-st ...