Come ridimensionare un'immagine all'altezza dello schermo con CSS?

A differenza di molte persone che desiderano un'immagine per riempire l'intero schermo, mi interessa solo l'altezza dell'immagine. Come posso usare i CSS (preferibilmente non JavasScript) per creare un'immagine di qualsiasi dimensione, riempire fino al 100% della finestra massima possibile del browser altezza mantenendo le proporzioni dell'immagine, la larghezza ridimensionata dell'immagine nel rispetto per il browser non importa.Come ridimensionare un'immagine all'altezza dello schermo con CSS?

Sto lavorando con questo html:

<div class="images"> 
    <img/> 
</div>

grazie mille!

fonte

2011-09-09 Mohammad

img { height:100% }

o se si vuole essere esplicito

img { height:100%; width:auto; }

altezza 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/
larghezza 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/1/

EDIT:

Questa risposta necessaria una certa attenzione . La demo è stata rotta e generalmente un casino. L'ho aggiornato con nuove immagini, regola aggiornata per compensare la natura inline delle immagini e l'altezza e la larghezza normalizzate degli elementi body e html.

fonte

2011-09-09 21:12:46

@Mohammad felice di aiutare :) –

i collegamenti non funzionano ... – Vickel

@Vickel In realtà sembra che jsfiddle potrebbe avere problemi con il server. Sto ottenendo un errore del server interno 500. –

Questo potrebbe essere eccessivo:

.img { 
    position: absolute; 
    height: 100% 
    top: 0; 
    bottom: 0; 
}

fonte

2011-09-09 21:14:57 Joe

no, questa è l'idea giusta, tranne che non è necessario il posizionamento, la parte superiore o inferiore, a meno che non si trovi in un contenitore. La parte importante sta lasciando la larghezza automatica –

Sì, come dice Joseph la parte superiore o inferiore non è realmente necessaria. – Mohammad

uh .. da quello che ho visto in questo, quello che devi veramente fare è indirizzare il tuo contenitore. Questo metodo rimuove essenzialmente l'elemento dal contenitore. prova a rendere le tue immagini div 'position: absolute; left: 0; top: 0; height: 100% '. –

Si potrebbe anche voler dare un'occhiata al vh, VW, Vmin e Vmax CSS unità - quali sono pretty well supported. C'è un buon articolo che descrive come raggiungere il 100% di altezza here.

BTW - attenzione agli spazi bianchi: questo può aggiungere un margine indesiderato. Rimuovendo lo spazio, aggiungendo un float, o usando l'hack font-size: 0 risolverai questo problema. Inoltre, quando si usano altri metodi, ricordarsi di impostare height: 100% per gli elementi body e html.

fonte

2014-11-19 20:45:37

Come ridimensionare un'immagine all'altezza dello schermo con CSS?

risposta

Problemi correlati