Wie wie div mit Hintergrund-Bild Akt machen wie <img "width=100%"/>

Ich habe diesen Code:Wie wie div mit Hintergrund-Bild Akt machen wie <img "width=100%"/>

div#fond { 
 
    background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg'); 
 
    background-size: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <div id="fond"> 
 
    ABCD 
 
    </div> 
 
    <br> 
 
    <img src="https://www.thetileapp.com/images/Purse_Tabletop-46.jpg" width="100%" /> 
 
</body> 
 

 
</html>

Wie kann ich die div hat das gleiche Verhalten tun, um als das img, so dass die Höhe des div sich an die Breite des Fensters anpasst. Momentan ist die Höhe an Div-Inhalt angepasst.

Quelle

2016-03-19 coutier eric

Damit die prozentuale Höhe funktioniert, müssen Sie html, body {height: 100%;} hinzufügen. Andernfalls können die Browser keinen Prozentwert von berechnen, was der Standardwert ist. Prozentuale Höhen funktionieren basierend auf Parnet. Wenn das übergeordnete Element body/html ist, müssen Sie die genannten Regeln hinzufügen.

Alternativ können Sie die Darstellungseinheiten verwenden (vw/vh), wie:

div#fond { 
    background-image: url('https://www.thetileapp.com/images/Purse_Tabletop-46.jpg'); 
    background-size: cover; 
    height: 100vh; 
    width: 100vw; 
}

Quelle

2016-03-19 14:59:11 Aziz

Vielen Dank für Ihre Reflexion Aziz aber I'e testeten die zwei Lösungen, aber keiner von ihnen das Ergebnis geben, ein div handeln wie "" Ich nehme an, die Lösung ist anspruchsvoller ... –

Werfen Sie einen Blick auf meine Demo: https://jsfiddle.net/azizn/nvdm4rrd/ es funktioniert wie erwartet – Aziz

Danke Aziz für Ihre Ausdauer. Ich habe einige Änderungen an deiner Geige vorgenommen, um "

Wie wie div mit Hintergrund-Bild Akt machen wie <img "width=100%"/>

Antwort

Verwandte Themen