Maximale Größe für Hintergrundbild CSS

Ich habe einen 70 x 50 px box und ich habe verschiedene Bilder (SVG-Dateien, also keine Größe) will ich behalten Ihr Seitenverhältnis bei, aber einige Bilder sind hochformat und einige sind der Landschaft angepasst ist. Also ich kann:

background-size: 70px auto;

und für alle die Landschaft icons. Aber es Strecken die portrait-Bilder und machen Sie größer, so werden Sie immer noch das richtige Seitenverhältnis aber oben und unten abgeschnitten wird.

gibt es irgendeine Art von hintergrund-max-Größe?

(alternativ der einzige Grund, ich bin mit hintergrund Bild da ist kannst du center richten Sie die Bild, horizontal und vertikal, so dass die alternative ist, zu finden, wie man Sie vertikal ausrichten ein img-element innerhalb eines li-Elements.)

InformationsquelleAutor der Frage Jonathan. | 2010-10-29

  1. 6

    Dies ist ein problem, dass CSS nicht lösen auf eigene. Es gibt JavaScript-Bibliotheken, die diesen job tun. Wenn Sie jQuery, finden Sie ein plugin oder Rollen Sie Ihre eigene Funktion.

    Greifen die Breite und Höhe des Bilds, und berechnen Sie das Verhältnis (x/y). Wenn das Verhältnis größer ist als 70/50 (1.4), setzen Sie die Breite auf 70 und die Höhe (70 * x/y). Wenn das Verhältnis weniger als 70/50 (1.4), setzen Sie die Höhe auf 50px und die Breite (50 * x/y).

    Siehe auch CSS vertical-align

    Wenn Sie die Verwendung von Browsern, die keine Unterstützung vertical-align können Sie die position des Bildes absolut bei 50%, und legen Sie den oberen Rand auf (Breite * -0.5) mit JavaScript. Dass richten Sie die Mitte des Bildes mit der Mitte des übergeordneten Elements, die die gleiche wie vertikal zentriert ausrichten.

    InformationsquelleAutor der Antwort kijin

  2. 25

    Es ist nicht schwer zu tun, dass mit CSS

    • 1. bitte werfen Sie einen Blick auf die Mozilla-Spezifikationen für gemischten Einheiten für background-size.
    • 2., bitte beachten Sie einfach die Einstellung background-size: contain; (IE9+, Safari 4.1+, FF 3.0+, Opera 10+) und min/max-width/height für das container-element.

    InformationsquelleAutor der Antwort kaiser

  3. 13

    Können Sie absolut dieses problem lösen, ohne JavaScript verwenden eine Kombination von CSS3 - background-size und media-queries. z.B.:

    @media only screen and (max-width: 1000px) {
    #element {
        background-size: contain;
    }
}

    Beachten Sie, dass weder unterstützt, IE8 oder unten, so sollten Sie auch fallbacks für alte IE, wenn Sie noch unterstützen.

    InformationsquelleAutor der Antwort richardwestenra

  4. 3

    Die Antwort auf diese Frage ist ein wenig veraltet. Als stringman5 erwähnt, weder von den CSS-Optionen werden unterstützt in IE8 oder unten. Es ist auch nicht die beste Wahl jQuery-handle Ihre hintergrund-Bilder, wenn es nicht notwendig ist. Um eine option die die fallbacks für ältere browser, ohne Verwendung von JavaScript, die Sie tun können, etwas in dieser Richtung:

    #myElement {
    background: #FFFFFF url('mybackground.jpg') no-repeat right top;
}

@media only screen and (max-width: 1024px){
    #myElement {
        background-size: 50%;
    }
}

    Bemerken, dass ich mit max-width in meinem Medien-Abfrage, bedeutet dies, dass background-size: 50%; wird ERST angewendet werden, wenn 1024px. Über diesen Punkt hinaus, ist es die Standard-Größe. In älteren Browsern, die nicht unterstützt Medien-Anfragen oder background-size, ignorieren Sie die Optionen und geben Sie die maximale Größe für das Hintergrundbild (Standard-Größe).

    InformationsquelleAutor der Antwort Matt Wagner

Schreibe einen Kommentar