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. DHCP的搭建

    挂载光盘 yum –y install dhcp cat /etc/dhcp/dhcpd.conf 配置文件到 /usr/share/doc/dhcp*/dhcpd.conf.sample 这是dhc ...

  2. 这台计算机上缺少此项目引用的 NuGet 程序包，DotNetCompilerPlatform

    严重性 代码 说明 项目 文件 行 禁止显示状态错误 这台计算机上缺少此项目引用的 NuGet 程序包.使用“NuGet 程序包还原”可下载这些程序包.有关更多信息,请参见 http://go.mic ...

  3. Innodb中MySQL如何快速删除2T的大表

    转自:http://database.51cto.com/art/201808/582324.htm OK,这里就说了.假设,你有一个表erp,如果你直接进行下面的命令: drop table erp ...

  4. 链表（list）使用注意

    如下代码是linux上的链表接口源码,使用的这个链表(list)源码,可以方便快捷的建立链表队列,但使用时需要注意的坑有: 1.不支持,多对多,否则在add的时候,因为要加入链表的对象只有一块list ...

  5. java中int算法的有趣现象

    今天无意中发现一个怪事,当时没理解,后来跟网友讨论了才知道原理,是关于int值的加法算法,两段代码如下: 代码1: @Test public void test1() { ; ; try { whil ...

  6. google的protobuf简单介绍

    google的protobuf是一种轻便高效的结构化数据存储格式,在通信协议和数据存储等领域中使用比较多.protobuf对于结构中的每个成员,会提供set系列函数和get系列函数. 但是,对于使用来 ...

  7. Python Pycharm 专题

    http://www.themesmap.com/theme.html?t=time&page=3 一些好的主题地址 直接导入import settings就可以使用了

  8. 源码小结：Java 集合ArrayList,LinkedList 源码

    现在这篇主要讲List集合的三个子类: ArrayList 底层数据结构是数组.线程不安全 LinkedList 底层数据结构是链表.线程不安全 Vector 底层数据结构是数组.线程安全 Array ...

  9. SyntaxError: 'ascii' codec can't decode byte 0xe4 in position 7: ordinal not in range(128)

    问题描述: SyntaxError: 'ascii' codec can't decode byte 0xe4 in position 7: ordinal not in range(128) 解决方 ...

  10. Lepus监控之Oracle配置

    1.安装cx_Oracle a.官网下载客户端组件包 oracle-instantclient12.2-basic-12.2.0.1.0-1.x86_64.rpmoracle-instantclien ...