Etiqueta <img>

Configurar los atributos width y height en las etiquetas <img> ayuda a evitar los cambios de diseño. Esta información permite que el navegador reserve la cantidad correcta de espacio para la imagen.

  • Configura los atributos width y height: Los valores de estos atributos se deben configurar para que coincidan con las dimensiones de la imagen en sí (es decir, su tamaño intrínseco), en lugar de las dimensiones en las que se mostrará.

  • Ajusta el estilo de la imagen según sea necesario: Según el estilo existente de la imagen, agregar atributos width y height puede hacer que la imagen se renderice de manera diferente. En muchos casos, esto se puede corregir agregando height: auto o width: auto al diseño existente.

Estilos de CSS anterior Cambiar por
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">