Question

我有一个html div

<div class="col-md-6 elo">       
    <div class="col col-1-2" style="animation-delay: -42s;">
      <div class="content animated fadeIn delayed">
        <div class="my-video">
            <video class="video--app" id="myVideo" autoplay="" muted="" preload="auto">
                <source src="./img/video.mp4" type="video/mp4">
            </video>
        </div>
      </div>               
    </div>
</div>

在css代码中设置背景图片：

.my-video {
    margin: auto;
    width: 372px;
    height: 705px;
    background-image: url(../img/myvideo@2x.png);
    background-size: 368px 705px;
}

当用户进入我的页面时，他看到在框架myvideo@2x.png中播放的mp4。但当他缩小网页时，我会通过应用移动查询来隐藏视频：

@media (max-width:600px){

  .video--app{
    display:none;
  }

我也想改变背景图像的大小，因此它的宽度等于可见区域的80％（高度应该与宽度成正比）。我尝试过设置：

background-size: auto;

到my-video但它没有用。我该如何解决呢？谢谢！

Answer 1

设置background-size:100%，然后添加width:100%

＆＃13;

.my-video {
  margin: auto;
  width: 372px;
  height: 705px;
  background: url(http://store.storeimages.cdn-apple.com/4973/as-images.apple.com/is/image/AppleInc/aos/published/images/i/ph/iphone6/plus/iphone6-plus-box-silver-2014_GEO_US?wid=478&hei=595&fmt=jpeg&qlt=95&op_sharpen=0&resMode=bicub&op_usm=0.5,0.5,0,0&iccEmbed=0&layer=comp&.v=J8El53) no-repeat 0 0;
  background-size: auto;
}
@media (max-width: 600px) {
  .video--app {
    display: none;
  }
  .my-video {
    background-size: 100%;
    width: 100%
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-6 elo">
      <div class="col col-1-2" style="animation-delay: -42s;">
        <div class="content animated fadeIn delayed">
          <div class="my-video">
            <video class="video--app" id="myVideo" autoplay="" muted="" preload="auto">
              <source src="./img/video.mp4" type="video/mp4">
            </video>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用背景尺寸作为封面。

.my-video {
    margin: auto;
    width: 372px;
    height: 705px;
    background-image: url(../img/myvideo@2x.png);
    background-size: cover;
}

如何通过背景图片将移动css查询应用于我的div？

2 个答案: