Wie kann ich mobile CSS-Abfrage auf mein div mit Hintergrundbild anwenden?

Question

Ich habe eine 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> 

mit einem Hintergrundbild in CSS-Code ein:

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

Wenn Benutzer meine Seite betritt sieht er die mp4 in einem Rahmen gespielt myvideo@2x.png. Aber als er die Webseite schrumpft, blende ich das Video von mobiler Abfrage Anwendung:

@media (max-width:600px){ 

    .video--app{ 
    display:none; 
    } 

und ich möchte auch die Größe des Hintergrundbildes ändern, so dass seine Breite zu 80% des sichtbaren Bereichs gleich ist (Höhe sollte proportional zur Breite sein). Ich habe versucht Einstellung:

background-size: auto; 

zu my-video aber es hat nicht funktioniert. Wie kann ich es dann reparieren? Vielen Dank!

Answer 1

gesetzt background-size:100% statt und fügen 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>

Answer 2

Sie Hintergrund Größe als Abdeckung verwendet werden können.

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