Ich habe eine Website (g-floors.eu) und möchte den Hintergrund (in CSS habe ich ein BG-Bild für den Inhalt definiert) auch reaktionsfähig machen. Leider habe ich wirklich keine Ahnung, wie ich das machen soll, außer einer Sache, die mir einfällt, aber es ist eine ziemliche Problemumgehung. Erstellen Sie mehrere Bilder und verwenden Sie dann die CSS-Bildschirmgröße, um die Bilder zu ändern. Ich möchte jedoch wissen, ob es einen praktischeren Weg gibt, um dies zu erreichen.
Grundsätzlich möchte ich erreichen, dass die Größe des Bilds (mit dem Wasserzeichen 'G') automatisch geändert wird, ohne dass weniger Bilder angezeigt werden. Wenn es natürlich möglich ist
Link: g-floors.eu
Code, den ich bisher habe (Inhaltsteil)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
Antworten:
Wenn Sie möchten, dass dasselbe Bild basierend auf der Größe des Browserfensters skaliert wird:
Stellen Sie keine Breite, Höhe oder Ränder ein.
BEARBEITEN: Die vorherige Zeile zum Nichteinstellen von Breite, Höhe oder Rand bezieht sich auf die ursprüngliche Frage von OP zur Skalierung mit der Fenstergröße. In anderen Anwendungsfällen möchten Sie möglicherweise bei Bedarf Breite / Höhe / Ränder festlegen.
quelle
div
erhalten ihre eigene Höhe aus ihrem eigenen Inhalt oder nehmen verfügbaren Platz in einem Flexbox-Modell ein. Zu sagen, dass der Container ohne explizite Breite / Höhe überhaupt nicht angezeigt wird, ist falsch. Wenn Sie ein leeres Div mit einem Hintergrundbild anzeigen möchten, müssen Sie natürlich die Höhe und möglicherweise die Breite festlegen. Dann wird jedoch nur ein Teil eines Bildes angezeigt, es sei denn, das Seitenverhältnis ist genau das gleiche wie ab das Bild selbst.Durch diesen Code wird Ihr Hintergrundbild in die Mitte verschoben und die Größe unabhängig von der Änderung Ihrer Div-Größe festgelegt. Gut für kleine, große und normale Größen. Am besten für alle. Ich verwende es für meine Projekte, bei denen sich meine Hintergrundgröße oder Div-Größe ändern kann
quelle
Versuche dies :
quelle
CSS:
Das sollte den Trick machen! :) :)
quelle
Hier ist ein Sass-Mixin für ein ansprechendes Hintergrundbild, das ich verwende. Es funktioniert für jedes
block
Element. Natürlich kann das gleiche in einfachem CSS funktionieren, Sie müssen nurpadding
manuell berechnen .Beispiel http://jsfiddle.net/XbEdW/1/
quelle
Dies ist eine einfache =)
Schauen Sie sich die jsFiddle-Demo an
quelle
Hier ist der beste Weg, den ich bekommen habe.
Überprüfen Sie die w3schools
Weitere verfügbare Optionen
quelle
ich benutzte
das hat wirklich gut funktioniert.
quelle
quelle
Responsive Website durch Hinzufügen von Polsterung in Höhe / Breite des unteren Bilds x 100 = Polsterung unten%:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
Kompliziertere Methode:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Versuchen Sie, die Größe des Hintergrunds von Firefox Ctrl + M zu ändern, um ein magisches Skript zu sehen, das ich für das beste halte:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
quelle
Sie können dies verwenden. Ich habe getestet und es funktioniert 100% korrekt:
Sie können Ihre Website mit diesem Bildschirmgrößen-Simulator schnell reagieren: http://www.infobyip.com/testwebsiteresolution.php
Leeren Sie Ihren Cache jedes Mal, wenn Sie Änderungen vornehmen, und ich würde es vorziehen, Firefox zum Testen zu verwenden.
Wenn Sie ein Image von einer anderen Site / URL verwenden möchten und nicht mögen:
background-image:url('../images/bg.png');
// Diese Struktur dient dazu, das Image von Ihrem eigenen gehosteten Server zu verwenden. Dann verwenden Sie wie folgt:background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Genießen :)
quelle
Wenn Sie möchten, dass das gesamte Bild unabhängig vom Seitenverhältnis angezeigt wird, versuchen Sie Folgendes:
Dies zeigt das gesamte Bild unabhängig von der Bildschirmgröße.
quelle
quelle
Nur zwei Codezeilen, es funktioniert.
quelle
Adaptiv für quadratisches Verhältnis mit jQuery
quelle
oder
quelle
Ich denke, der beste Weg, dies zu tun, ist folgender:
Auf diese Weise müssen Sie nichts weiter tun und es ist ganz einfach.
Zumindest funktioniert es bei mir.
Ich hoffe, es hilft.
quelle
Versuchen Sie
background-size
es mit ZWEI ARGUMENTEN, eines für die Breite und das andere für die Höhequelle
Mit der Positionseigenschaft können Sie oben, unten und in der Mitte nach Bedarf ausrichten. Die Hintergrundgröße kann für den mittleren Zuschnitt (Cover) oder das Vollbild (enthalten oder 100%) verwendet werden.
quelle