Immagine ridimensionamento con i CSS

Io in realtà non bisogno ora, ma solo per curiosità ...Immagine ridimensionamento con i CSS

Supponiamo di avere un fluido layout di sito web che funziona perfettamente su 1920px display e su piccoli smartphone. Ora diciamo che abbiamo le immagini lì e ovviamente (ovviamente?) Vogliamo ridimensionarle. Abbiamo caricato le immagini 2560px su un server (perché a chi importa oggi la larghezza di banda) e imposta la proprietà width: 100% al tag img.

Quindi abbiamo due utenti: un programmatore con un display da 1920 pixel, chiamiamolo Jo, e una studentessa con uno smartphone, chiamiamola Nancy (perché tutto è meglio con Nancy, giusto?).

Jo e Nancy sono contenti perché il nostro piano di ridimensionamento delle immagini con width: 100% funziona, ma se decidessimo di mostrare anche piccole immagini, qualcosa come 400 px di larghezza? Nancy non noterà nulla, ma per Jo sarebbe un disastro.

Quindi la domanda è: possiamo rendere felici Jo e Nancy senza usare JavaScript?

fonte

2012-01-09 Daniel J F

Che cosa significa renderli felici? Inoltre, offrire immagini da 2560 px agli smartphone è una pessima idea. –

Saranno felici se la nostra immagine verrà ridimensionata sullo smartphone di Nancy e Jo vedrà l'immagine a 400px, senza ridimensionamento. –

Vuoi dire che hai impostato l'attributo width dell'immagine al 100% come in ""? – MrMisterMan

Perché non utilizzare lo max-width: 100%?

Ciò lascerà tutte le immagini che sono più piccole della larghezza dello schermo e quelle che sono più larghe dello schermo saranno ridimensionate al 100%. Problema risolto, felice a tutti!

fonte

2012-01-09 15:28:49 Filip

Questo è sicuramente il modo tradizionale di fare immagini nel responsive web design. –

Perché sarebbe troppo facile, ovviamente! In realtà, hai risposto alla mia domanda, non ho mai usato 'max-width' con le immagini, ma ci ho provato ora e funziona bene. Grazie. –

Aggiungo che sembra necessario aggiungere un'altezza: auto alle immagini per evitare che le proporzioni vengano distorte (almeno sul browser mobile che sto usando ora ...) –

Se si desidera inviare immagini diverse a schermi diversi in base alla loro larghezza, è necessario immergersi in quelle domande multimediali condizionali di cui si continua a parlare.
Questo è un bel sito web: http://webdesignerwall.com/tutorials/css3-media-queries

fonte

2012-01-09 15:41:38

Grazie, li uso già quasi ovunque. Ho solo pensato cosa sarebbe successo se ci fosse una situazione in cui non sarei in grado di usare immagini diverse. –

ho usato max-width: 100% come aveva detto Filip, ma ho anche bisogno di includere:

height:auto

caso contrario, l'altezza non sarebbe in scala.

fonte

2014-05-08 17:56:59 ContextSwitch

Immagine ridimensionamento con i CSS

risposta

Problemi correlati