Gibt es eine Möglichkeit, max-width und height für ein Hintergrundbild zu verwenden?

Question

Das ist einfach.

Ich verschiebe mein Layout in ein flüssiges Gebiet, arbeite an skalierbaren Bildern. Die Verwendung des img-Tags und die Einstellung von max-width auf 100% funktionieren perfekt, aber ich würde lieber ein div mit dem Bild als Hintergrund verwenden.

Das Problem, auf das ich stoße, ist, dass das Bild nicht auf die Größe des div skaliert, in dessen Hintergrund es sich befindet. Gibt es eine Möglichkeit, dem Hintergrundcode Markup hinzuzufügen, um es auf 100% Breite seines Containers zu setzen?

#one {
    background: url('../img/blahblah.jpg') no-repeat;
    max-width: 100%;
}

Answer 1

Wie von thirtydot gesagt, können Sie die CSS3-background-size-Syntax verwenden:

Zum Beispiel:

-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;

Allerdings funktioniert dies, wie auch von thirtydot erwähnt, nicht in IE6, 7 und 8.

Sehen Sie sich die folgenden Links für weitere Informationen zu background-size an: http://www.w3.org/TR/css3-background/#the-background-size

Answer 2

Sie können dies mit background-size tun:

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    background-size: cover;
}

Es gibt viele Werte außer cover, die Sie für background-size festlegen können, sehen Sie, welcher für Sie funktioniert: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Spezifikation: https://www.w3.org/TR/css-backgrounds-3/#the-background-size

Es funktioniert in allen modernen Browsern: http://caniuse.com/#feat=background-img-opts

Answer 3

Es sieht so aus, als ob Sie versuchen, das Hintergrundbild zu skalieren? Es gibt einen großartigen Artikel im unten stehenden Referenzlink, in dem Sie css3 verwenden können, um dies zu erreichen.

Und wenn ich die Frage falsch verstanden habe, dann nehme ich die Abstimmungen nach unten demütig an. (Trotzdem gut zu wissen)

Bitte beachten Sie den folgenden Code:

#some_div_or_body {
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

Dies funktioniert in allen gängigen Browsern, natürlich ist es nicht einfach für den IE. Es gibt jedoch einige Workarounds, wie die Verwendung von Microsoft-Filtern:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Es gibt einige Alternativen, die mit etwas mehr Ruhe verwendet werden können, indem man jQuery verwendet:

HTML

CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

jQuery:

 $(window).load(function() {    

var theWindow        = $(window),
    $bg              = $("#bg"),
    aspectRatio      = $bg.width() / $bg.height();

function resizeBg() {

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg
            .removeClass()
            .addClass('bgheight');
    } else {
        $bg
            .removeClass()
            .addClass('bgwidth');
    }

}

theWindow.resize(resizeBg).trigger("resize");

});

Ich hoffe, das hilft!

Quelle: Perfektes Ganzseiten-Hintergrundbild

Answer 4

Leider gibt es kein min (oder max)-background-size in CSS, du kannst nur background-size verwenden. Wenn du jedoch ein responsives Hintergrundbild suchst, kannst du Einheiten wie Vmin und Vmax für die background-size-Eigenschaft verwenden, um etwas Ähnliches zu erreichen.

Beispiel:

#one {
    background:url('../img/blahblah.jpg') no-repeat;
    background-size:10vmin 100%;
}

Dadurch wird die Höhe auf 10 % des kleineren Viewports (vertikal oder horizontal) festgelegt und die Breite auf 100 %.

Erfahre mehr über CSS-Einheiten hier: https://www.w3schools.com/cssref/css_units.asp

Answer 5

Dies ist die Lösung, nach der Sie suchen!

Hintergrundgröße: 100% auto;