Imágenes: establecer anchura y altura (width y height)

Utilizando las propiedades width y height es posible mostrar las imágenes con cualquier altura/anchura, independientemente de su altura/anchura real:

#destacada {
width: 120px;
height: 250px;
}
<img id="destacada" src="imagen.png" />

No obstante, si se utilizan alturas/anchuras diferentes de las reales, el navegador deforma las imágenes y el resultado estético es muy desagradable.

Por otra parte, establecer la altura/anchura de todas las imágenes mediante CSS es una práctica poco recomendable. El motivo es que normalmente dos imágenes diferentes no comparten la misma altura/anchura.

Por lo tanto, se deberá crear una nueva regla CSS (y un nuevo selector) para cada una de las diferentes imágenes del sitio web, lo que supondrá una tarea pesada y de difícil mantenimiento para el diseñador.

Además, esta forma de trabajo produce una sobrecarga de estilos que la hace inviable.

Por este motivo, aunque es una solución que no respeta la separación completa entre contenidos (XHTML) y presentación (CSS), se recomienda establecer la altura/ anchura de las imágenes mediante los atributos width y height de la etiqueta <img>:

<img src="imagen.png" width="120" height="250" />


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO