Aquí podría ser tu PUBLICIDAD


¿Ancho / alto de la imagen como atributo o en CSS?

votos
78

¿Cuál es la forma semántica correcta para especificar la altura y el ancho de la imagen? En CSS ...

width:15px;

o en línea ...

<img width=15

?

CSS parece ser el lugar adecuado para poner información visual. Por otro lado, pocos argumentarían que la imagen src no debería especificarse como un atributo y que el alto / ancho parece estar relacionado con los datos de imagen binarios como lo es el src.

(Sí, me doy cuenta desde una perspectiva técnica del usuario final que esto realmente no importa).

Publicado el 12/03/2009 a las 20:47
fuente por usuario Wayne Kao
En otros idiomas...        العربية       

12 respuestas

votos
68

Debe ser definido en línea. Si está utilizando la etiqueta img, esa imagen debe tener un valor semántico para el contenido, por lo que se requiere el atributo alt para la validación.

Si la imagen debe formar parte del diseño o la plantilla, debe usar una etiqueta que no sea la etiqueta img y asigne la imagen como un fondo CSS al elemento. En este caso, la imagen no tiene ningún significado semántico y, por lo tanto, no requiere el atributo alt. Estoy bastante seguro de que la mayoría de los lectores de pantalla ni siquiera sabrían que existe una imagen CSS.

Respondida el 12/03/2009 a las 08:58
fuente por usuario VirtuosiMedia


Aquí podría ser tu PUBLICIDAD


votos
15

Creo que depende de cómo se está utilizando el atributo. Si va a peinar varias imágenes dentro de una lista o tabla para que se ponen a cabo correctamente, a continuación, poner la anchura / altura en el CSS para evitar la necesidad de añadir otro conjunto de etiquetas para cada imagen en la lista. Usar algo como

ul.gallery img: { width:117px; } 

Por otro lado, si se va a insertar una imagen en un poco de contenido y tiene que tener un cierto tamaño para hacer que el flujo de documentos correctamente, a continuación, poner en el HTML . De esa manera usted no tiene que arruinar definitivamente la hoja de estilo para cada imagen diferente en el html. Y de esta manera, si se cambia el contenido de una imagen diferente, de quitar la imagen de todos juntos, que no tienen restos de código dispersos en el CSS para recordar a eliminar.

Respondida el 01/12/2012 a las 06:28
fuente por usuario muns

votos
12

La altura y anchura deben ser incluidos en el código HTML. La razón es que crea el espacio en la página. Si por cualquier razón la img no se puede cargar (y que ha sido un buen chico y se incluye un navegador alt..the mostrará que el entramado (utilizando la w y h proporcionado) con el alt interior.

La razón principal beneficio es la prevención de los efectos "pop". Cuando un navegador carga la página aspectos veces más grandes como img tardan más en cargarse, y si no se ha especificado el W y H en el código HTML que el navegador se colapsarán temporalmente esa zona pensando que no es allí. Luego, cuando finalmente se carga todo lo que aparece en su lugar adecuado.

Esto es especialmente molesto, pero aún así es bastante molesto en un ordenador, ya que van a hacer clic en un vínculo y, de repente, la página se desplaza hacia abajo y usted ha hecho clic accidentalmente el enlace mal.

Respondida el 08/08/2012 a las 09:42
fuente por usuario Matt

votos
7

Yo diría CSS.

HTML es sobre contenido,
CSS es sobre presentación.

Respondida el 12/03/2009 a las 09:12
fuente por usuario stevenvh

votos
5

Si nos fijamos en la especificación HTML5 especificando altura y la anchura no es una opción un requisito. Código tanto, es válido con o sin estos atributos.

Desde un punto de vista práctico, es altamente deseable especificar su alcance para evitar reflujos de páginas como se mencionó anteriormente. Sin embargo, aquellos que sugiere que debe haber en el html debido a esto faltan los navegadores hecho de utilizar CSS en la construcción de la página inicial. Si no lo hicieran la página tendría que ser rediseñado para elementos flotantes, relleno especificado, márgenes, etc.

Ya sea para especificar en HTML o CSS se determina mejor de las circunstancias individuales. Un gran número de imágenes del mismo tamaño, probablemente sería mejor servido con css, una sola imagen con html. Dicho esto, si va a especificar otros estilos para la imagen (borde de color, estilo o radio, flotar, etc.) que tendría sentido para agregar altura y la anchura de la CSS.

Si especifica en html que sólo se puede utilizar píxeles. Si usted quiere especificar en porcentaje digamos que tendría que utilizar CSS.

En una nota lateral, nos anima a usar ems &% en lugar de píxeles para ayudar a evitar problemas cuando los usuarios cambian la configuración del navegador, etc, etc todavía imágenes siempre se hace referencia en píxeles. Es obvio que hay razones prácticas para el uso de píxeles para imágenes. Sin embargo mantener las imágenes en píxeles parecerían negar el argumento para no usarlos.

Respondida el 27/06/2013 a las 08:37
fuente por usuario user2529544

votos
4

Yo diría HTML.

Los atributos de anchura y altura se utilizan para detener la página se cargue y creciente de una manera inconexo.

Si alguna vez ha estado leyendo un bloque de texto en una página sólo para que se empujó a la baja gracias a la imagen de carga por encima de finales sabes lo frustrante que es!
La adición de un identificador a cada imagen simplemente para especificar la anchura y la altura sería absurdo y simplemente casi tan complicado como la adición de los atributos de los dos anchura / altura de todos modos.

La captura se Firefox no utiliza el ancho y la altura atribuye a reservar el espacio de las imágenes sin embargo, Me sorprende que no han actualizado en realidad.

Respondida el 01/03/2011 a las 10:48
fuente por usuario Christo

votos
3

Por el artículo <img> en el MDN , los atributos HTML indican los intrínsecos dimensiones de la imagen, es decir, sus dimensiones reales. Por eso, mientras que los valores de porcentaje de HTML 4 también permitió, HTML5 sólo permite valores de píxeles. (error común: el "px" no debe ser escrito)

Si desea mostrar la imagen con estas dimensiones, trabajo hecho. De lo contrario, también hay que añadir CSS para especificar la pantalla de tamaño.

Por supuesto, es mejor para servir a la imagen en el tamaño que se muestra, para evitar el cambio de tamaño del navegador, ahorrar ancho de banda, etc., pero que no siempre es posible.

Véanse también las respuestas a esta pregunta: ¿ Cuál es la diferencia entre HTML y del atributo width de CSS?

Respondida el 03/06/2017 a las 10:23
fuente por usuario Gras Double

votos
2

Si es parte de la plantilla de su sitio, la ubicaría en el archivo CSS.

Si está solo en una página, debe estar alineado (o definido en un bloque de CSS específico de la página en la parte superior).

Respondida el 12/03/2009 a las 08:49
fuente por usuario Jeremy L

votos
1

Mi opinión es que es parte del contenido, como usted mencionó, tanto como el atributo src también.

Por otro lado, no hay una necesidad real de especificar ancho o alto en html o css, aunque podría ayudar a que tu página se renderice más rápido.

Respondida el 13/03/2009 a las 12:11
fuente por usuario spiral

votos
0

Me gustaría ir wi (d) º Recomendación W3C.

Es decir, la definición de la anchura y la altura como un atributo de esta manera:

<img src="example.png" width="150" height="150" alt="example image">

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

Respondida el 05/04/2015 a las 09:18
fuente por usuario Darko Atanasov

votos
0

Como clientes de correo electrónico abordar los obstáculos img como atributos vs estilos en línea?

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >

https://www.emailonacid.com/app/acidtest/display/summary/FAPNOuxiTtQN72OswSOfnQWbfnZswUAHhGCPbuzh4hk9a/shared

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >

https://www.emailonacid.com/app/acidtest/display/summary/CbRqMbMtCbVdpggthGRn5QPWeidpIo8aHaa6kl8TCqaD6/shared

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >

https://www.emailonacid.com/app/acidtest/display/summary/CemSW48eKxJBuQqCIO8oh8y77muOKfPvBsYsDjyswhi8g/shared

<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >

https://www.emailonacid.com/app/acidtest/display/summary/vjAVkYnlD3TQyrfIDj4NGvoneeDc8hakzLaHdMsETaGSE/shared

Por lo tanto, las limitaciones de tamaño img no deben establecerse de estilos en línea, principalmente porque Outlook 2007/2010/2013 no respeta ellos.

¿Qué pasa cuando ambos atributos y estilos en línea están en uso? Algunos clientes utilizan uno o el otro, y algunos utilizan el ancho de línea en combinación con la altura de atributos:

<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >

https://www.emailonacid.com/app/acidtest/display/summary/6JdKm63qDVDxHuaJE2lZhV4NAOq8qxG4eSQ7VWRUALWLP/shared

Uso atributos img para el correo electrónico HTML: tldr.

Respondida el 30/03/2015 a las 09:55
fuente por usuario Mike Muldoon

votos
0

Podría estar equivocado, y si yo soy, por favor, que alguien me corrija ... pero creo que Google y algunos otros motores de búsqueda indexan el contenido de las etiquetas alt.

A veces, por la estética del diseño, he creado una imagen de texto creado con fuentes que no están disponibles a través de HTML, pero están disponibles para Photoshop, Illustrator, etc Si usted tiene una impresión tipográfica precisa desea crear lo que implica información textual, las única manera de conseguir que a través de es crear una imagen del texto tipográfico y poner el texto real en una etiqueta alt por el bien de los motores de búsqueda.

Si alguien tiene una solución mejor, me encantaría escucharlo.

Mientras tanto, aunque, dada la necesidad de lo que he descrito, parecería razonable para mí votar a favor de HTML en línea / altura parámetros de ancho, junto con descripciones de texto alternativo, como una cuestión de práctica estándar. Es, de hecho, el contenido, no sólo diseñan en tales casos - y tales casos realmente no debería haber excepciones a la regla hasta que los motores de búsqueda CSS y llegar a una solución mejor.

Respondida el 31/03/2011 a las 03:06
fuente por usuario John David Hoag


Aquí podría ser tu PUBLICIDAD