Sostituzione immagine fluido CSS?

Question

L'uso di CSS per sostituire il testo con un'immagine è una pratica ben nota. CSS-Tricks ha un museo di alcune tecniche (http://css-tricks.com/examples/ImageReplacement/).

Ma nessuno di questi consente la sostituzione con un'immagine fluida (ad esempio, un logo che si estende per il 100% di un layout di pagina fluido). È possibile utilizzare i CSS per eseguire una sostituzione di immagini fluide?

Quasi tutte le tecniche di sostituzione dell'immagine utilizzano un'immagine di sfondo. E so che è possibile impostare background-size: 100%. Ma non è semplice ottenere l'altezza dell'elemento di testo in scala con la sua larghezza perché il browser non considera l'immagine di sfondo come parte del contenuto.

Capisco che qualsiasi tecnica di sostituzione delle immagini comune possa essere facilmente combinata con le query multimediali per modificare in modo incrementale la dimensione dell'elemento di testo in rapporti di altezza x larghezza specifici che funzionano. Ma questo è incrementale, non fluido.

Ho trovato un post sul blog che discute di questo (http://viljamis.com/blog/2011/fluid-image-replacement.php). Ma risulta che il metodo in realtà richiede l'inserimento di un'immagine nel contenuto html. Sto cercando la sostituzione del testo reale.

Answer 1

preso un po 'giocherellare, ma ho trovato il modo. La chiave è usare la percentuale di riempimento per impostare l'altezza, perché la percentuale di padding-top e di padding-bottom è collegata alla larghezza del contenitore (a differenza di height, che è collegata all'altezza del contenitore).

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; 
} 

Dove padding-top è calcolato dividendo l'altezza dell'immagine per larghezza.

esempio di lavoro: http://jsfiddle.net/bXtRw/

farò notare che l'uso overflow: hidden invece di text-indent: -9999px dovrebbe anche funzionare. Ma ottengo un comportamento instabile in Firefox.

Inoltre, utilizzando font-size: 0 anziché height: 0 si genera un comportamento instabile in Firefox.

Answer 2

Sul div che contiene l'immagine di sfondo:

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

Answer 3

Io uso un metodo identico a @Warren Whipple, ma di solito uso compass/sass. Se non si è limitato ad usare i CSS vaniglia, questo metodo ben astrae un paio di pezzi:

// 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%; 
} 

si dovrebbe solo essere necessario sostituire la variabile $header-logo-image con il nome della vostra immagine.

---

Inoltre, a volte mi aggiungo: max-width: image-width($header-logo-image);, che impedirà il h1 di essere dimensionati qualsiasi grande la sua immagine di sfondo di.