Responsive Bild mit div von css background-image

Ich habe festgestellt, es gibt hier ähnliche Fragen, wie Responsive CSS background images.Responsive Bild mit div von css background-image

Diese Lösung hat nicht für mich funktioniert, wenn ich nicht die genaue Höhe des Bildes für dieses div eingestellt habe. Erstens, wenn ich seine Höhe nicht festlege, wird das Bild nicht angezeigt, da die Höhe von div Null ist. Zweitens, wenn ich die Höhe dafür festlege, reagiert es nicht auf die Browserbreite. Wenn ich den Browser erweitere, habe ich erwartet, dass das Bild entsprechend der Breite skaliert wird. Aber wenn ich height: 100% verwende, wird das Bild nicht mehr angezeigt.

Ich möchte es sein: Wenn ich die Browser-Breite anpassen, wird die Bildbreite und -höhe in Abhängigkeit von der Verwendung von CSS-Hintergrund-Bild-Attribut hoch/runter skaliert werden.

Ich denke, es ist mit einigen grundlegenden CSS-Tricks verwandt, aber ich bin nicht wirklich gut darin. Kann mir jemand eine Lösung vorschlagen? Ich danke dir sehr!

.top-banner{ 
 
    height:100%; 
 
} 
 
@media (min-width:768px) { 
 
    .top-banner { 
 
    background-image: url('http://everetttheatre.com/wp-content/uploads/2016/03/toy-story-banner.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
    } 
 
} 
 

 
@media (max-width:767px) { 
 
    .top-banner { 
 
    background-image: url('https://i.pinimg.com/originals/31/de/36/31de3624c128d5748039ae9523223eb5.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
    } 
 
}

<div class="top-banner"> 
 

 
</div>

Quelle

2017-12-10 Sammi

Stellen Sie die Marge auf: margin: 0; –

@mauricebruijn irgendein anderes css mit dieser Linie? wenn ich einfach margin: 0 & height: 100% zum div hinzufüge, wurde das Bild immer noch nicht angezeigt – Sammi

Sie könnten versuchen, die Höhe des div auf 100% und die Höhe des Bildes auf: auto; und das gleiche mit der Breite –

Höhe in Arbeits Prozentsatz pflegt es sei denn, eine der Mutterelementhöhe in Pixel hat.

Mein Vorschlag ist, img-Tag anstelle von Hintergrundbild zu verwenden, um es ansprechend zu machen.

Aber wenn Sie nur Div mit Hintergrundbild verwenden können, dann haben Sie die Höhe des div on window resize Ereignisses mit Javascript geändert.

Wie, wenn Bild 4: 3-Verhältnis, der Code wird so etwas wie unten:

<body onresize="resizeFunction()"> 
    <style> 
    .imgBackground { 
     width : 100%; 
     background : your image link; 
     background-size : 100%; 
    } 
    </style> 
    <div class="imgBackground"></div> 
    <script> 
     function resizeFunction() { 
     var widthOfDiv = $('.imgBackground').width(); 
     var heightOfDiv = width/1.33; 
     $('.imgBackground').height(heightOfDiv); 
     } 
    </script> 
</body>

Quelle

2017-12-10 17:38:39 Pradeep

Danke Pradeep !! Große Demonstration – Sammi

@Sammi Willkommen !! Ich hoffe, es hat dir geholfen. – Pradeep

Responsive Bild mit div von css background-image

Antwort

Verwandte Themen