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. macbook下mysql安装

    1 原材料 1.1 mysql-5.7.22-macos10.13-x86_64.dmg 2 msql在macbook下的安装: 双击dmg进行解压, 再双击解压出来的pkg文件进行安装 3. Con ...

  2. Js高级 事件冒泡

    什么叫事件冒泡 当给父子元素的同一事件绑定方法时,触发了子元素身上的事件,执行完毕之后,也会触发父级元素的相同事件,这种传播机制叫事件冒泡. 取消事件冒泡 Event对象有个属性叫cancelBubb ...

  3. linux的基本操作1

    文件系统 ext4 d: 进入d盘dir /w 以友好的方式列出目录cd     目录名 进入目录cd\      退出目录cd ..    退出到上级目录ipconfig /all 显示本机网络信息 ...

  4. form表单以及内嵌框架标签

    今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...

  5. Android引入动态库so的方法

    Android引入动态库so的方法 标签(空格分隔): Android so 第三方库 为了执行效率,会将一些CPU密集性任务如音视频解码.图像处理等放入到so中,还有也会将程序关键核心部分放入到so ...

  6. MySQL--Profiling和Trace使用

    使用MySQL Profiling ##=====================================## ## 查看PROFILING是否开启 SELECT @@profiling ## ...

  7. 基于redis的 分布式锁 Java实现

    package com.hs.services.lock; import java.util.concurrent.TimeUnit; import javax.annotation.Resource ...

  8. 第三章 C#程序结构(3.1 顺序与选择结构)

    [案例]输入某一学生的成绩,输出其对应的档次.具体规定:90分以上为优秀,80分以上至89分为良好,70分至79分为一般,60分至69分为合格,59以下为不及格.如果输入的分数小于0或大于100,则输 ...

  9. Ubuntu更新时提示错误 E: Sub-process /usr/bin/dpkg returned an error code (1)

    $ sudo su //root权限 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old //现将info文件夹更名 $ sudo mkdir /v ...

  10. E212: Can't open file for writing Press ENTER or type command to continue

    E212: Can't open file for writing Press ENTER or type command to continue 出现这个错误的原因可能有两个: 1.当前用户的权限不 ...