Come conservare le proporzioni durante il ridimensionamento dell’immagine utilizzando una dimensione (CSS) in IE6?

Ecco il problema Ho un’immagine:

alttext 

Nota Nessuna altezza o larghezza specificata.

Su alcune pagine voglio mostrare solo una miniatura. Non riesco a modificare l’html, quindi utilizzo il seguente CSS:

 .blog_list div.postbody img { width:75px; } 

Quale (nella maggior parte dei browser) crea una pagina di miniature uniformsmente larghe, tutte con proporzioni conservate.

In IE6, tuttavia, l’immagine viene ridimensionata solo nella dimensione specificata nel CSS. Mantiene l’altezza “naturale”.

Ecco un esempio di una coppia di pagine che illustrano il problema:

  • La lista, che dovrebbe mostrare le miniature
  • Un singolo post sul blog, che mostra l’immagine a dimensione intera.

Sarei molto grato per tutti i suggerimenti, ma vorrei sottolineare che (a causa delle limitazioni della piattaforma scelta dai clienti) sto cercando qualcosa che non implichi la modifica dell’html. Anche i CSS sarebbero preferibili a javascript.

EDIT: dovrebbe ricordare che le immagini sono di diverse dimensioni e proporzioni.

Adam Luter mi ha dato l’idea per questo, ma in realtà si è rivelato molto semplice:

 img { width: 75px; height: auto; } 

IE6 ora ridimensiona l’immagine e questo sembra essere quello che tutti gli altri browser usano per impostazione predefinita.

Grazie per entrambe le risposte!

Sono contento che abbia funzionato, quindi suppongo che tu abbia dovuto impostare “auto” in modo esplicito su IE6 per poter imitare altri browser!

Di recente ho trovato un’altra tecnica per ridimensionare le immagini, ancora una volta progettata per gli sfondi. Questa tecnica ha alcune caratteristiche interessanti:

  1. Le proporzioni dell’immagine vengono mantenute
  2. La dimensione originale dell’immagine viene mantenuta (ovvero, non può mai contrarre solo crescere)

Il markup si basa su un elemento wrapper:

 

Visto il markup sopra riportato, usi queste regole:

 #wrap { height: 100px; width: 100px; } #wrap img { min-height: 100%; min-width: 100%; } 

Se poi controlli la dimensione del wrapper ottieni gli effetti di scala interessanti che elencherò sopra.

Per essere espliciti, si consideri il seguente stato di base: un contenitore che è 100×100 e un’immagine che è 10×10. Il risultato è un’immagine in scala di 100×100.

  1. A partire dallo stato di base, il contenitore viene ridimensionato a 20×100, l’immagine viene ridimensionata a 100×100.
  2. A partire dallo stato di base, l’immagine viene modificata in 10×20, l’immagine viene ridimensionata a 100×200.

Quindi, in altre parole, l’immagine è sempre grande almeno quanto il contenitore, ma si scala oltre per mantenere le proporzioni.

Questo probabilmente non è utile per il tuo sito e non funziona in IE6. Tuttavia, è utile ottenere uno sfondo in scala per la porta o il contenitore di visualizzazione.

Bene, posso pensare a un hack CSS che risolverà questo problema.

Puoi aggiungere la seguente riga nel tuo file CSS:

 * html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

Il codice sopra sarà visto solo da IE6. Le proporzioni non saranno perfette, ma potresti renderlo un po ‘normale. Se volessi davvero renderlo perfetto, avresti bisogno di scrivere qualche javascript per leggere la larghezza dell’immagine originale e impostare il rapporto di conseguenza per specificare un’altezza.

L’unico modo per fare il ridimensionamento esplicito nei CSS è usare trucchi come quelli trovati qui .

Solo per IE6, puoi anche utilizzare i filtri (consulta PNGFix ). Ma applicandoli automaticamente alla pagina sarà necessario javascript, anche se tale javascript potrebbe essere incorporato nel file CSS.

Se hai intenzione di richiedere javascript, ti consigliamo di fare in modo che javascript compili il valore mancante per l’altezza controllando l’immagine una volta caricato il contenuto. (Scusa se non ho un riferimento per questa tecnica).

Infine, e scusami per questo soapbox, potresti voler evitare il supporto IE6 in questa faccenda. È ansible aggiungere _width: auto dopo la width: 75px regola width: 75px , in modo che IE6 width: 75px almeno l’immagine ragionevolmente, anche se è della dimensione sbagliata.

Raccomando l’ultima soluzione semplicemente perché IE6 è in via di esaurimento: il 20% e scendendo quasi del 100% al mese . Inoltre, noto che il tuo sito è ricreativo e nel Regno Unito. Entrambi aiutano l’inclinazione demografica ad allontanarsi da IE6: l’utilizzo di IE6 scende quasi del 40% durante i fine settimana (nessuna citazione scusa), e il Regno Unito ha un calo demografico IE6 molto basso (ancora nessuna citazione, scusa).

In bocca al lupo!