La dimensione dell'immagine deve essere definita negli attributi altezza/larghezza del tag img o CSS?

Question

È meglio che la pratica di codifica definisca una dimensione di immagine negli attributi width e height del tag e height?

<img src="images/academia_vs_business.png" width="740" height="382" alt="" /> 

Oppure in stile CSS con larghezza/altezza?

<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" /> 

O entrambi?

<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" /> 

Answer 1

Qui vado contro corrente e dichiaro che il principio di separare il contenuto dal layout (che giustificherebbe le risposte che suggeriscono l'uso di CSS) non si applica sempre all'altezza e alla larghezza dell'immagine.

Ogni immagine ha un'altezza e una larghezza originali innate che possono essere ricavate dai dati dell'immagine. Nell'ambito del contenuto rispetto al layout, direi che questa informazione di altezza e larghezza derivata è il contenuto, non il layout, e dovrebbe quindi essere resa come HTML come attributi di elemento.

Questo è molto simile al testo alt, che si può anche dire derivato dall'immagine. Ciò supporta anche l'idea che un interprete utente arbitrario (ad esempio un browser vocale) debba disporre di tali informazioni per correlarlo all'utente. Come minimo, le proporzioni potrebbero rivelarsi utili ("l'immagine ha una larghezza di 15 e un'altezza di 200"). Tali programmi utente non elaborerebbero necessariamente alcun CSS.

Le specifiche indicano che gli attributi width e height possono anche essere utilizzati per sovrascrivere l'altezza e la larghezza trasportate nel file di immagine effettivo. Non sto suggerendo che siano usati per questo. Per sovrascrivere l'altezza e la larghezza, credo che i CSS (in linea, incorporati o esterni) siano l'approccio migliore.

Quindi, a seconda di cosa si vuole fare, si dovrebbe specificare una e/o l'altro. Penso che idealmente, l'altezza e la larghezza originali siano sempre specificate come attributi dell'elemento HTML, mentre le informazioni sullo stile dovrebbero essere trasmesse facoltativamente in CSS.

Answer 2

Sicuramente non entrambi. A parte questo, dovrei dire che è una preferenza personale. Userò css se avessi molte immagini delle stesse dimensioni per ridurre il codice.

.my_images img {width: 20px; height:20px} 

Nel CSS lungo termine può vincere a causa di HTML attributo deprecazione e più probabile a causa della crescita dei formati di immagine vettoriale come SVG, dove si può effettivamente dare un senso di scalare le immagini utilizzando unità non a base di pixel come% o em.

Answer 3

<img id="uxcMyImageId" src"myImage" width="100" height="100" /> 

specificando larghezza e l'altezza nel tag immagine è un buon modo practice..this al caricamento della pagina v'è spazio allocato per l'immagine e il layout non subisce alcun cretini, anche se l'immagine richiede molto tempo caricare.

Answer 4

Mentre è corretto utilizzare gli stili in linea, è possibile servire meglio gli scopi includendo un file CSS esterno nella pagina. In questo modo puoi definire una classe di immagini (ad esempio "Miniatura", "Foto", "Grande", ecc.) E assegnarle una dimensione costante. Questo ti aiuterà quando ti ritrovi con immagini che richiedono lo stesso posizionamento su più pagine.

Ti piace questa:

 
In your header: 
<link type="text/css" rel="stylesheet" href="css/style.css" /> 

Your HTML: 
<img class="thumbnail" src="images/academia_vs_business.png" alt="" /> 

In css/style.css: 
img.thumbnail { 
    width: 75px; 
    height: 75px; 
} 

Se vuoi utilizzare gli stili inline, però, è probabilmente meglio per impostare la larghezza e l'altezza utilizzando l'attributo di stile per il bene di leggibilità.

Answer 5

Il motivo storico per definire l'altezza/larghezza nei tag è che i browser possano ridimensionare gli elementi effettivi <img> nella pagina anche prima che vengano caricate le risorse CSS e/o immagine. Se non si forniscono esplicitamente altezza e larghezza, l'elemento <img> verrà sottoposto a rendering a 0x0 fino a quando il browser non potrà ridimensionarlo in base al file. Quando ciò accade, provoca il reflow visivo della pagina una volta che l'immagine viene caricata e viene composta in caso di più immagini sulla pagina. Il dimensionamento di <img> tramite altezza/larghezza crea un segnaposto fisico nel flusso della pagina con le dimensioni corrette, consentendo il caricamento del contenuto in modo asincrono senza interrompere l'esperienza dell'utente.

In alternativa, se si sta facendo dispositivi mobili-sensibile, che è una best practice in questi giorni, è abbastanza comune per specificare una larghezza (o max-width) solo e definire l'altezza come auto. In questo modo quando definisci le query multimediali (ad es. CSS) per diverse larghezze dello schermo, puoi semplicemente regolare la larghezza dell'immagine e lasciare che il browser gestisca mantenendo l'altezza dell'immagine/proporzioni corrette. Si tratta di una sorta di approccio di medio livello, in quanto si può ottenere un reflow, ma consente di supportare una vasta gamma di dimensioni dello schermo, quindi il vantaggio generalmente supera il negativo.

Infine, in alcuni casi potresti non conoscere le dimensioni dell'immagine in anticipo (l'immagine src potrebbe essere caricata dinamicamente, oppure può cambiare durante il ciclo di vita della pagina tramite script) nel qual caso l'uso di CSS ha senso.

La linea di fondo è che è necessario comprendere i compromessi e decidere quale strategia ha più senso per ciò che si sta tentando di raggiungere.

Answer 6

Opzione a. Semplice dritto in avanti. Quello che vedi è ciò che ottieni facilmente per fare calcoli.

Opzione b. Troppo disordinato per farlo in linea a meno che tu non voglia avere un sito che può allungare. Ad esempio, se hai usato il with:86em, i browser moderni sembrano gestire questo funzionalmente in modo adeguato per i miei scopi ... Personalmente l'unica volta che vorrei usare qualcosa di simile è se dovessi creare un catalogo di miniature.

/*css*/ 
ul.myThumbs{} 
ul.myThumbs li {float:left; width:50px;} 
ul.myThumbs li img{width:50px; height:50px;border:0;} 

<!--html--> 
<ul><li> 
<img src="~/img/products/thumbs/productid.jpg" alt="" /> 
</li></ul> 

Opzione c. Troppo complicato da mantenere.

Answer 7

Sto utilizzando contentEditable per consentire la modifica di testo avanzato nella mia app. Non so come si scivola attraverso, ma quando si inserisce un'immagine, e poi ridimensionata (trascinando le ancore sul suo lato), genera qualcosa di simile:

<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/> 

(test successivo mostrato che le immagini inserite non contiene questo stile "canaglia" attr + param).

Quando viene eseguito il rendering dal browser (IE7), la larghezza e l'altezza nello stile sostituiscono il parametro img width/height (in modo che l'immagine sia mostrata come la volevo .. ridimensionata a 55 x x 55 px.

Quando invio la pagina a un documento di ms-word impostando il tipo mime application/msword o incollando il rendering del browser nel documento msword, tutte le immagini sono tornate alle dimensioni predefinite. che msword sta scartando lo stile e usa il tag img width e height (che ha il valore della dimensione originale dell'immagine).

Mi ci è voluto un po 'per scoprirlo. Comunque ... Ho codificato una funzione javascript per attraversare tutti i tag e "trasferire" i valori img style.width e style.height in img.width e img.height, quindi cancellare entrambi i valori in stile, prima di procedere salvare questo pezzo di dati html/richtext nel database.

evviva.

opps .. la mia risposta è .. no. lascia entrambi gli attributi direttamente sotto img, piuttosto che in stile.