图片视频按比例铺满整个父级div
<div class="videoPlayContainer"> <div class="videoContent"> <div class="videoClose" id="tapBack"><img src="../../img/videoClose.png" ></div> <video class="videoItem" controls name="media" poster="" autoplay> <source id="playsource" src="" type="video/mp4"> </video> </div> </div> /* 视频播放页面样式 */ .videoPlayContainer{width: 100%;display: flex;align-items: center;} .videoPlayContainer .videoContent{width: 100%;overflow: hidden;} .videoPlayContainer .videoContent .videoClose{position: absolute;top: 20px;right: 20px;} .videoPlayContainer .videoContent .videoClose img{width: 25px;} .videoPlayContainer .videoContent .videoItem{width:100%; height:100%; object-fit: fill}
注意:object-fit属性不能放在行内样式中,不然不会生效
<div class="imgContainer"><img src="http://static.csqf001.com/20191023143714_257.png"></div> .imgContainer{ width: 100%; height: 110px; border: 1px solid #999999; } .imgContainer img { width: 100%; height: 100%; object-fit: cover; }