Ist es möglich, ein <div> an sein Hintergrundbild anzupassen? Ich meine, die Proportionen Breite und Höhe beizubehalten.
Klarstellung:
Die div ändern die Breite. (Es ist ein responsives Design)
Ich will nicht, dass sich der Hintergrund dem div anpasst. Dies ist mit background-size möglich. Aber was ich verlange ist der runde: um ein Bild im Hintergrund zu haben und die Div-Eltern dazu zu bringen, sich an das Bild anzupassen, egal welche Größe es hat .
Ich weiß, dass ich etwas Ähnliches machen kann, wenn ich das Bild in den HTML-Code und nicht in den Hintergrund lege. Aber in diesem Fall konnte ich das Bild für verschiedene Gerätegrößen nicht ändern. Daher möchte ich das Bild in den Hintergrund stellen, um es mit CSS zu ändern.
In dem Beispiel, das ich gebe, kann ich das Bild an die Breite anpassen, aber ich bekomme eine Lücke mit der Höhe. Kann ich den div auch an die Höhe des Bildes anpassen, wenn das Bild seine Größe ändert? Anders gefragt: Kann in einer reaktionsfähigen Umgebung ein div mit einem Bildhintergrund seine Größe ändern, ohne dabei leere Bereiche zu hinterlassen?
Hier ist das Beispiel zum Abspielen.
CSS:
%Vor%HTML:
%Vor%Nein, es ist NICHT möglich, ein div an sein Hintergrundbild anzupassen.
Weil es 'sinnlos' ist
So geht's:
Die Größe eines div wird durch seinen "Inhalt" bestimmt, oder wenn seine Dimensionen BESONDERS festgelegt sind. Da das Hintergrundbild nicht in eine dieser Kategorien fällt, können Sie sehen, dass dies unmöglich ist.
Was Sie tun können, ist dies:
Das div wird nun die Größe des Bildes haben und das .content wird darüber angezeigt.
Beachten Sie auch, dass das .content div in der Reihenfolge des Auftretens über oder unter dem <img> liegen kann, aber der Effekt wäre der gleiche. Wenn Sie jedoch auch eine Eigenschaft position auf das Element img anwenden, müssen Sie z-index von .content größer als% <img>
Durch die Verwendung von CSS ist es nicht möglich, die Dimension eines Elements entsprechend seiner background-image size zu ändern. Um dies zu erreichen, sollten Sie JavaScript verwenden:
HTML:
%Vor%JavaScript:
%Vor%Hier ist die jQuery-Version.
%Vor%Ja . Wir können das Hintergrundbild anpassen, um es div zu machen.
Tipps für ein responsives Hintergrundbild:
background-size:cover
-set bg Bild auf Hintergrundgröße Cover
-css das Padding wird sowohl oben als auch unten auf Prozent gesetzt
-make das BG-Bild keine Wiederholung
Siehe diesen Link: Ссылка
Ok, meine Lösung ist ein bisschen knifflig, aber es funktioniert. Es ist ein Javascript und involvieren jQuery, wie Sie wollten. Die Idee besteht darin, ein neues Bild zu erstellen, es dem DOM hinzuzufügen, zu warten, bis es geladen ist und seine Dimensionen erhält. Danach wird das neue Bild entfernt und die Breite und Höhe werden auf das ursprüngliche img -Tag angewendet. Hier ist eine JS-Geige, die die Problemumgehung demonstriert Ссылка
Und hier ist der Code:
%Vor%Und das CSS:
%Vor%Am einfachsten ist es, wenn JavaScript nicht erforderlich ist, dass Sie Ihr Bild als Hintergrundbild festlegen und dann eine GIF- oder PNG-Datei derselben Größe erstellen, die Sie als Überlagerungsbild in diesem div festlegen. Das transparente .png oder .gif wird das div. Transparente .png oder .gif sind nur ein paar KB und Ihre Seite wird schneller geladen als mit Javascript.
%Vor%Tags und Links html css background