CSS per ridimensionare le immagini e adattarsi a qualsiasi schermo lo stesso

Question

Ho lavorato con una pagina temporanea a http://www.flywavez.com ma non riesco a ridimensionare l'immagine e ad essere la stessa in tutte le risoluzioni dello schermo. Sull'iPhone taglia la ragazza prima della vita, e si adatta perfettamente quando visualizzata sul mio schermo del portatile da 19 "con la risoluzione di 1366 x 768, e anche quando ho alimentato il video al mio TV 55" via VGA dal mio portatile. Tuttavia, quando guardo a monitor più grandi con una risoluzione maggiore, c'è un grande spazio e una vista ovvia dove finisce la dimensione dell'immagine. Ho pensato di ridimensionare il CSS con /* Tablet Landscape */ @media screen e (larghezza massima: 1060px) { # wrapper {larghezza: 67%; }}

/* Tabled Portrait */ 
    @media screen and (max-width: 768px) { 
     #wrapper { width:100%; } 
    } 

    /* Tabled Portrait */ 
    @media screen and (max-width: 768px) { 
     #wrapper { width:100%; } 
    } 

    /* iphone */ 
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     img { max-width: 100%; } 
    } 

    /* ipad */ 
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
img { max-width: 100%; } 
    } 

Voglio che questa immagine da mostrare su tutte le risoluzioni in quanto se visto sui 1366 x 768.

Grazie per qualsiasi aiuto.

Answer 1

Penso che sia fondamentalmente impossibile ottenere ciò che si sta tentando di fare senza perdere il rapporto di immagine, che è probabilmente indesiderabile. Hai preso in considerazione l'utilizzo della proprietà 'background-size'? Il CSS sotto raggiunge un buon look:

body { 
    background: url('images/example.jpg') no-repeat fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Potete vedere qui: http://jsfiddle.net/DTN54/

Answer 2

copertura Questa parola chiave specifica che l'immagine di sfondo deve essere scalata per essere il più piccolo possibile, garantendo nel contempo sia le sue dimensioni sono maggiore o uguale alle dimensioni corrispondenti dell'area di posizionamento dello sfondo.

contiene Questa parola chiave specifica che l'immagine di sfondo deve essere ridimensionata per essere il più grande possibile, pur assicurando che entrambe le sue dimensioni siano inferiori o uguali alle dimensioni corrispondenti dell'area di posizionamento dello sfondo. Quindi prova a usare contenere invece di coprire

100% Questo scalerà il 100% sia in altezza che in larghezza senza alcun ritaglio.

body { 
     background: url('images/example.jpg') no-repeat fixed; 
     -webkit-background-size: contain; 
     -moz-background-size: contain; 
     -o-background-size: contain; 
     background-size: contain; 
    } 

Answer 3

Fondamentalmente, questo è tutto ciò che serve:

body { 
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center; 
}