html - 如何将移动 css 查询应用于带有背景图像的 div？

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%

.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%
  }
}

<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>