图片视频按比例铺满整个父级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;
}

 

posted @ 2019-11-06 10:26  Jayer  阅读(433)  评论(0编辑  收藏  举报