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

Ecco il problema. Ho un'immagine:

<img alt="alttext" src="filename.jpg"/>

Nota nessuna altezza o larghezza specificate.

In alcune pagine voglio mostrare solo una miniatura. Non posso modificare l'html, quindi utilizzo il seguente CSS:

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

Che (nella maggior parte dei browser) crea una pagina di miniature di larghezza uniforme, tutte con proporzioni preservate.

In IE6, tuttavia, l'immagine viene ridimensionata solo nella dimensione specificata nel CSS. Mantiene l'altezza "naturale".

Ecco un esempio di un paio di pagine che illustrano il problema:

• L'elenco, che dovrebbe mostrare le miniature
• Un singolo post del blog, che mostra l'immagine a grandezza naturale.

Sarei molto grato per tutti i suggerimenti, ma vorrei sottolineare che (a causa dei limiti della piattaforma scelta dal cliente) sto cercando qualcosa che non implichi la modifica dell'html. Anche CSS sarebbe preferibile a javascript.

EDIT: Dovrebbe menzionare 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 bene l'immagine e questo sembra essere quello che tutti gli altri browser usano per impostazione predefinita.

Grazie per entrambe le risposte però!

Sono contento che abbia funzionato, quindi immagino che tu abbia dovuto impostare esplicitamente "auto" su IE6 in modo che imitasse altri browser!

Recentemente 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 preservate
2. La dimensione originale dell'immagine viene mantenuta (ovvero, non può mai ridursi ma solo crescere)

Il markup si basa su un elemento wrapper:

<div id="wrap"><img src="test.png" /></div>

Dato il markup di cui sopra, 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 interessanti effetti di scala che ho elencato sopra.

Per essere espliciti, considera il seguente stato di base: un contenitore che è 100 x 100 e un'immagine che è 10 x 10. Il risultato è un'immagine in scala di 100x100.

1. A partire dallo stato di base, il contenitore ridimensionato a 20 x 100, l'immagine rimane ridimensionata a 100 x 100.
2. A partire dallo stato di base, l'immagine viene modificata in 10x20, l'immagine viene ridimensionata a 100x200.

Quindi, in altre parole, l'immagine è sempre grande almeno quanto il contenitore, ma si ridimensionerà oltre per mantenere le sue proporzioni.

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

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 verrà visualizzato solo da IE6. Le proporzioni non saranno perfette, ma potresti farlo sembrare un po 'normale. Se vuoi davvero renderlo perfetto, dovresti scrivere un po 'di javascript che legga la larghezza dell'immagine originale e impostare il rapporto di conseguenza per specificare un'altezza.

L'unico modo per eseguire il ridimensionamento esplicito in CSS è utilizzare trucchi come quelli che si trovano qui .

Solo IE6, puoi anche usare i filtri (controlla PNGFix ). Ma applicandoli automaticamente alla pagina sarà necessario javascript, sebbene tale javascript possa essere incorporato nel file CSS.

Se hai intenzione di richiedere javascript, potresti semplicemente voler inserire javascript nel valore mancante per l'altezza ispezionando l'immagine una volta che il contenuto è stato caricato. (Scusa non ho un riferimento per questa tecnica).

Infine, e scusatemi per questa soapbox, potresti voler evitare il supporto di IE6 in questa materia. Puoi aggiungere _width: autodopo la tua width: 75pxregola, in modo che IE6 renda almeno l'immagine in modo ragionevole, anche se è della dimensione sbagliata.

Consiglio l'ultima soluzione semplicemente perché IE6 è in uscita: il 20% e scenderà di quasi l'uno per cento al mese . Inoltre, noto che il tuo sito è ricreativo e nel Regno Unito. Entrambi aiutano la magra demografica a stare lontana da IE6: l'utilizzo di IE6 scende di quasi il 40% durante i fine settimana (nessuna citazione, scusa) e il Regno Unito ha una demografia di IE6 molto più bassa (di nuovo nessuna citazione, scusa).

In bocca al lupo!