Come si ridimensiona automaticamente un'immagine per un sito mobile?

Ho provato una ricerca su Google e ancora non riesco a capire come ridimensionare un'immagine per la sua larghezza per vari dispositivi mobili. Qui è il mio tentativo:Come si ridimensiona automaticamente un'immagine per un sito mobile?

CSS:

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

HTML:

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <img class="test" src="../includes/foo.jpg">

Ma l'immagine è ancora in fase caricato con la sua scala originale. Sono un css e html newb quindi qualsiasi aiuto sarebbe fantastico!

Modifica:

Grazie per le risposte. Ecco una versione rivista che ora funziona.

HTML:

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <body width = "device-width"> 
     <img class="test" src="../includes/buoy_map.jpg"> 
    </body>

fonte

2011-10-05 Richard

Hai fornito uno degli elementi principali dell'immagine di una larghezza? – Gerben

Il tuo tag 'img' dovrebbe trovarsi all'interno di' body'. In realtà non hai un tag body, quindi aggiungine uno :-) – Bojangles

Il tuo css con non ha alcun effetto in quanto l'elemento esterno non ha una larghezza definita (e manca anche il corpo).

Un approccio diverso è quello di fornire immagini già ridimensionate. Ad esempio, http://www.sencha.com/products/io/ consegna l'immagine già ridotta in base al dispositivo di visualizzazione.

fonte

2011-10-05 13:40:52 konsolenfreddy

img { 
    max-width: 100%; 
}

deve impostare l'immagine per prendere il 100% di esso è elemento che contiene.

fonte

2011-10-05 13:37:56

Questo è utile, in alcune circostanze, ma ignorerà le proporzioni dell'immagine, potenzialmente distorcendola. – jamesnotjim

in questo caso dovrebbe includere l'altezza: auto; – Geomorillo

Questa dovrebbe essere la risposta accettata – niry

img 
{ 
    max-width: 100%; 
    min-width: 300px; 
    height: auto; 
}

fonte

2013-08-28 19:22:49 squarcle

Per me, ha funzionato meglio per aggiungere questo in immagine css: max-width:100%; e non specifica larghezza e l'altezza in parametri HTML. Questo aggiusta la larghezza per adattarsi allo schermo del dispositivo mentre regola automaticamente l'altezza. Altrimenti l'altezza potrebbe essere distorta.

fonte

2014-10-13 16:32:10 adrianTNT

se si utilizza bootstrap 3, basta aggiungere img-reattiva classe nel tag img

<img class="img-responsive" src="...">

se si utilizza bootstrap 4, aggiungere img-fluido classe nel tag img

<img class="img-fluid" src="...">

che fa il personale: max-width: 100%, altezza: auto, un nd display: blocco all'immagine

fonte

2017-05-04 09:18:47

Non so perché qualcuno ha votato questa risposta. Questo funziona bene per me. L'immagine si schiaccia bene nel browser Mobile. Grazie. –

altezza: auto; ha fatto il trucco per me. Ora le mie immagini stanno ridimensionando di conseguenza alla risoluzione del dispositivo mobile. Grazie –

Come si ridimensiona automaticamente un'immagine per un sito mobile?

risposta

Problemi correlati