vw, vh视区覆盖和自适应图片

 

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>