tamaño - mostrar imagen en html
¿Debería definirse el tamaño de la imagen en los atributos de altura/ancho de la etiqueta img o en CSS? (7)
Esta pregunta ya tiene una respuesta aquí:
¿Es mejor la práctica de codificación definir un tamaño de imagen en los atributos width y height la etiqueta img ?
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
¿O en el estilo CSS con ancho / alto?
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
¿O ambos?
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
Definitivamente no ambos. Aparte de eso, tendría que decir que es una preferencia personal. Usaría css si tuviera muchas imágenes del mismo tamaño para reducir el código.
.my_images img {width: 20px; height:20px}
A largo plazo, CSS puede ganar debido a la degradación del atributo HTML y más probablemente debido al crecimiento de formatos de imagen vectorial como SVG, donde en realidad puede tener sentido escalar imágenes utilizando unidades que no sean basadas en píxeles como% o em.
Estoy usando contentEditable para permitir la edición de texto enriquecido en mi aplicación. No sé cómo se desliza, pero cuando se inserta una imagen y luego se redimensiona (arrastrando los anclajes de su lado), genera algo como esto:
<img style="width:55px;height:55px" width="100" height="100" src="pic.gif" border=0/>
(Las pruebas posteriores mostraron que las imágenes insertadas no contenían este estilo "deshonesto" attr + param).
Cuando el navegador lo renderiza (IE7), el ancho y la altura del estilo anulan el parámetro ancho / alto de img (para que la imagen se muestre como yo quería ... se redimensionó a 55px x 55px. Así que todo salió bien, así parece.
Cuando imprimo la página en un documento de ms-word configurando la aplicación / msword tipo mime o pegando la representación del navegador en el documento de msword, todas las imágenes vuelven a su tamaño predeterminado. Finalmente descubrí que msword descarta el estilo y usa la etiqueta de ancho y altura de img (que tiene el valor del tamaño de la imagen original).
Me tomó un tiempo descubrir esto. De todos modos ... he codificado una función de JavaScript para atravesar todas las etiquetas y "transferir" los valores de img style.width y style.height a img.width y img.height, y luego borrar ambos valores en estilo, antes de continuar guardando esta pieza de datos html / richtext en la base de datos.
aclamaciones.
opps ... mi respuesta es ... no. deje ambos atributos directamente debajo de img, en lugar de estilo.
La razón histórica para definir alto / ancho en las etiquetas es para que los navegadores puedan dimensionar los elementos <img> reales en la página incluso antes de que se carguen los recursos de CSS y / o de imagen. Si no proporciona el ancho y el ancho explícitamente, el elemento <img> se representará en 0x0 hasta que el navegador pueda dimensionarlo según el archivo. Cuando esto sucede, provoca un reflujo visual de la página una vez que se carga la imagen, y se agrava si tiene múltiples imágenes en la página. Al dimensionar <img> través de alto / ancho se crea un marcador de posición físico en el flujo de la página con el tamaño correcto, lo que permite que el contenido se cargue de forma asíncrona sin interrumpir la experiencia del usuario.
Alternativamente, si está haciendo un diseño sensible a dispositivos móviles, que es una buena práctica en estos días, es bastante común especificar un ancho (o ancho máximo) solamente y definir la altura como auto . De esta forma, cuando defina consultas multimedia (por ejemplo, CSS) para diferentes anchos de pantalla, simplemente puede ajustar el ancho de la imagen y permitir que el navegador trate de mantener la relación altura / aspecto de la imagen correcta. Este es un enfoque intermedio, ya que puede obtener un poco de reflujo, pero le permite admitir una amplia gama de tamaños de pantalla, por lo que el beneficio normalmente supera el negativo.
Finalmente, hay momentos en que puede que no sepas el tamaño de la imagen con anticipación (el src imagen puede cargarse dinámicamente o puede cambiar durante el tiempo de vida de la página a través del script), en cuyo caso usar CSS solo tiene sentido.
En resumidas cuentas, debe comprender las compensaciones y decidir qué estrategia tiene más sentido para lo que intenta lograr.
Si bien está bien usar estilos en línea, es mejor que se satisfagan sus propósitos al incluir un archivo CSS externo en la página. De esta forma, podría definir una clase de imagen (es decir, ''Miniatura'', ''Foto'', ''Grande'', etc.) y asignarle un tamaño constante. Esto ayudará cuando termine con imágenes que requieren la misma ubicación en varias páginas.
Me gusta esto:
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; }
Sin embargo, si desea usar estilos en línea, probablemente sea mejor establecer el ancho y el alto usando el atributo de estilo por razones de legibilidad.
Voy a ir contra la corriente aquí y afirmar que el principio de separar el contenido del diseño (lo que justificaría las respuestas que sugieren el uso de CSS) no siempre se aplica a la altura y el ancho de la imagen.
Cada imagen tiene un alto y ancho original innato que se puede derivar de los datos de la imagen. En el marco del diseño de contenido vs., diría que esta información derivada de altura y ancho es contenido, no diseño, y por lo tanto debe representarse como HTML como atributos de elementos.
Esto es muy parecido al texto alt , que también puede decirse que se deriva de la imagen. Esto también respalda la idea de que un agente de usuario arbitrario (por ejemplo, un navegador de voz) debe tener esa información para relacionarla con el usuario. Como mínimo, la relación de aspecto podría ser útil ("la imagen tiene un ancho de 15 y una altura de 200"). Dichos agentes de usuario no necesariamente procesarían ningún CSS.
La especificación dice que los atributos de width y height también se pueden usar para anular la altura y el ancho transportados en el archivo de imagen real. No estoy sugiriendo que se usen para esto. Para anular la altura y el ancho, creo que CSS (en línea, incrustado o externo) es el mejor enfoque.
Entonces, dependiendo de lo que quieras hacer, deberías especificar uno y / o el otro. Creo que, idealmente, la altura y el ancho originales siempre se especificarían como atributos del elemento HTML, mientras que la información de estilo debería transmitirse opcionalmente en CSS.
Opción a. Fwd recta simple Lo que ves es lo que obtienes para hacer cálculos fácilmente.
Opción b. Demasiado desordenado para hacer esto en línea a menos que desee tener un sitio que pueda estirarse. IE si with:86em el with:86em sin embargo, los navegadores modernos parecen manejar esto funcionalmente de manera adecuada para mis propósitos ... Personalmente, la única vez que usaría algo como esto es si tuviera que crear un catálogo de miniaturas.
/*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>
Opción c. Demasiado complicado para mantener.
<img id="uxcMyImageId" src"myImage" width="100" height="100" />
especificar ancho y alto en la etiqueta de la imagen es una buena práctica ... de esta forma, cuando la página se carga, hay espacio asignado para la imagen y el diseño no sufre ninguna sacudida, incluso si la imagen tarda mucho tiempo en cargarse.