So skalieren Sie ein Bild auf ein anderes Bild

Question

Ich muss ein Bild eines Symbols (die Wiedergabetaste) über ein Miniaturbild eines Videos setzen, aber es sollte in der Mitte bleiben (vertikal und horizontal) unabhängig von der Breite von die Fenster oder das Gerät und skalieren auch entsprechend der windwos Breite. Mein Bild skaliert gut nach dem Fenster, aber mein Icon nicht. Ich habe viele Lösungen gefunden, aber alle hatten Höhe und Breite in px definiert, was ich nicht möchte. Ich möchte, dass mein Symbol eine dynamische Breite und Höhe entsprechend der Fensterbreite hat.

hier ist mein css

.video-section .video-icon { 
    position: absolute; 
    top: 36%; 
    left: 43.8%; 
} 
.video-section .bg-img { 
    position: relative; 
} 

Answer 1

Skala es wie dieses

.video-section .video-icon { 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
} 

Oberhalb transform Eigenschaft wird nur in allen Browsern funktionieren, wenn Sie Präfix in ihm hinzufügen sonst kann es nicht mit allen Browsern.

-Code sollte wie folgt

.video-section .video-icon { 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    -moz-transform:translate(-50%,-50%); 
    -ms-transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%); 
    -o-transform:translate(-50%,-50%); 
} 

Answer 2

werden oder Sie können es wie folgt tun:

.video-section .bg-img { 
 
    position: relative; 
 
    background: lightblue; 
 
    height: 300px; 
 
    width: 50%; 
 
} 
 

 
.video-section .video-icon { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    margin: auto; 
 
    height: 50%; 
 
    width: 50%; 
 
}

<div class="video-section"> 
 
    <div class="bg-img"> 
 
    <img src="http://placehold.it/30x30" alt="" class="video-icon"> 
 
    </div> 
 
</div>

keine Notwendigkeit, zu transformieren.

Bearbeiten: Benutzer Prozentsatz Breite/Höhe, um Symbol reagieren.