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

Ich habe eine html divWie kann ich mobile CSS-Abfrage auf mein div mit Hintergrundbild anwenden?

<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/[email protected]); 
    background-size: 368px 705px; 
}

Wenn Benutzer meine Seite betritt sieht er die mp4 in einem Rahmen gespielt [email protected]. 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!

Quelle

2016-06-28 user3766930

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>

Quelle

2016-06-28 17:07:21 dippas

hmm Wie wäre es mit der Einstellung von Breite und Höhe? Das Setzen von nur Hintergrundgröße auf 100% funktionierte in meinem Fall nicht ... – user3766930

Kannst du eine funktionierende Geige bereitstellen, um dir besser zu helfen? – dippas

https://jsfiddle.net/vv95Lmv6/ schau es dir an, wenn ich die Ausgabe verkleinere Ich wollte, dass das iPhone kleiner wird, um den Bildschirm zu passen, aber es schrumpft nicht ... – user3766930

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

.my-video { 
    margin: auto; 
    width: 372px; 
    height: 705px; 
    background-image: url(../img/[email protected]); 
    background-size: cover; 
}

Quelle

2016-06-28 18:52:09 365DaysMasti

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

Antwort

Verwandte Themen