CSS Flüssigkeit Bild Ersatz?

Question

Die Verwendung von CSS zum Ersetzen von Text durch ein Bild ist eine allgemein bekannte Methode. CSS-Tricks hat ein Museum einiger Techniken (http://css-tricks.com/examples/ImageReplacement/).

Keines dieser Elemente ermöglicht jedoch den Austausch durch ein flüssiges Bild (z. B. ein Logo, das sich über 100% eines flüssigen Seitenlayouts erstreckt). Ist es möglich, CSS zu verwenden, um einen flüssigen Bildaustausch durchzuführen?

Fast alle Bildwiederherstellungstechniken verwenden ein Hintergrundbild. Und ich weiß, dass Sie background-size: 100% setzen können. Es ist jedoch nicht einfach, die Höhe des Textelements mit der Breite zu skalieren, da der Browser das Hintergrundbild nicht als Teil des Inhalts betrachtet.

Ich verstehe, dass jede der gängigen Bild Replacement-Techniken leicht mit Media-Abfragen kombiniert werden können, um die Größe des Textelements inkrementell zu bestimmten Verhältnis von Höhe zu Breite zu ändern, die funktionieren. Aber das ist schrittweise, nicht flüssig.

Ich habe einen Blogbeitrag gefunden, der dies diskutiert (http://viljamis.com/blog/2011/fluid-image-replacement.php). Aber es stellt sich heraus, dass die Methode tatsächlich ein Bild in den HTML-Inhalt setzen muss. Ich suche nach einem echten Textersatz.

Answer 1

nahm etwas Fummelei, aber ich dachte, einen Ausweg. Der Schlüssel ist die Verwendung von Füllprozentsatz zum Festlegen der Höhe, da padding-top und padding-bottom Prozent mit der Containerbreite verknüpft sind (im Gegensatz zu height, die mit Containerhöhe verknüpft ist).

html

<h1 class="logo">The Logo</h1> 

Css

h1.logo { 
    background-image: url('logo.png'); 
    background-size: 100%; 
    width: 100%; 
    padding-top: 29.8%; 
    height: 0; 
    text-indent: -9999px; 
} 

Wo padding-top durch Dividieren der Bildhöhe von Breite berechnet wird.

Arbeitsbeispiel: http://jsfiddle.net/bXtRw/

Ich werde beachten Sie, dass mit overflow: hidden statt text-indent: -9999px sollte auch funktionieren. Aber ich bekomme ein instabiles Verhalten in Firefox.

Auch die Verwendung von font-size: 0 anstelle von height: 0 führt zu einem instabilen Verhalten in Firefox.

Answer 2

Auf der div, die den Hintergrund-Bild enthält:

div { 
    max-width: 100%; 
    width: 100%; 
    min-height: 300px; //Adjust this number accordingly 
    height: auto; 
} 

Answer 3

Ich verwende eine Methode identisch mit @Warren Whipple, aber ich verwende normalerweise /sass. Wenn Sie mit Vanille-CSS nicht darauf beschränkt sind, ist diese Methode gut abstrahiert ein paar Stücke:

// Only works in Compass/Sass – not regular CSS! 
h1.logo { 

    $header-logo-image: "logo.png"; 

    background: image-url($header-logo-image) no-repeat; 
    background-size: 100%; 
    height: 0; 
    padding-top: percentage(image-height($header-logo-image)/image-width($header-logo-image)); 
    overflow: hidden; 
    width: 100%; 
} 

Sie sollten nur die $header-logo-image Variable mit dem Namen Ihres Bildes zu ersetzen.

---

Außerdem füge ich manchmal: max-width: image-width($header-logo-image);, die die h1 verhindern von so bemessen ist, jede größer als sein Hintergrundbild.