Lección 10: Imagenes

No solo se puede definir en HTML la anchura y altura de las imágenes, existe posibilidad de usar CSS.

img {
	width: 100px;
	height: 200px;
}

Aunque suele ser mas practico utilizar una anchura del 100% ya que permite que las imágenes se adapten automáticamente a todo tipo de contenedores o resoluciones.

img {
	width: 100%;
}

¿Y donde esta la altura?, no es necesario ya que deformaría la imagen.

aspect-ratio

¿Qué ocurriría si tengo la necesidad de que una imagen sea cuadrada sea cual sea su anchura? Para ello debemos utilizar aspect-ratio.

img {
	aspect-ratio: anchura / altura;
}

Mantendrá la proporción de anchura y altura que le configuremos.

Algunos configuraciones de ejemplo serias las siguientes:

img {
	aspect-ratio: auto; /* Por defecto */
	aspect-ratio: 1 / 1; /* Cuadrado */
	aspect-ratio: 16 / 9; /* Un ejemplo horizontal */
	aspect-ratio: 1; /* Simplificacion cuadrado */
}

object-fit y object-cover

Habrás notado que tus imágenes de deforman cuando les cambias la relación de aspecto entre la anchura y la altura, o mediante un aspect-ratio o simplemente usando width acompañado de height. Por suerte podemos solucionarlo con CSS.

Partimos de la siguiente imagen del puente Golden Gate de California.

Como puedas comprobar contiene una proporción vertical (más alta que ancha o retrato), pero necesitamos para el diseño que sea horizontal (más ancho que alto o paisaje).

img {
	width: 500px;
	height: 300px;
}

¡La imagen no se ve bien! Ha quedado estirada. Podemos solucionarlo usando las propiedades de object recortando la imagen.

img {
	width: 500px;
	height: 300px;
	object-fit: cover;
}

Ahora solo quedaría posicionar el recorte para que se dedique toda la zona superior o la parte donde es visible al puente.

img {
	width: 500px;
	height: 300px;
	object-fit: cover;
	object-position: top;
}

Ejemplo real

Un caso real que me encuentro muy a menudo: mostrar una imagen un formato cuadrado, pero la imagen original no lo es (rectangular). Y, por si no fuera poco, es necesario que sea adaptativa (o su anchura sea de 100%). Como lo hacemos sin deformarla?

Partimos con la siguiente imagen de una bonita abeja que nos quiere seducir con la mirada.

Le damos una anchura del 100% y aplicamos un aspecto cuadrado.

img {
	width: 100%; /* Tamaño adaptativo */
	aspect-ratio: 1 / 1; /* Aspecto cuadrado */
}

Y terminamos recortando con object-fit para que la imagen no se deforme.

img {
	width: 100%; /* Tamaño adaptativo */
	aspect-ratio: 1 / 1; /* Aspecto cuadrado */
	object-fit: cover; /* Recorta la imagen para que no aparezca deformada */
	object-position: center; /* Centra la imagen en el recorte */
}

Como extra podríamos redondearla con border-radius.

img {
	width: 100%; /* Tamaño adaptativo */
	aspect-ratio: 1 / 1; /* Aspecto cuadrado */
	object-fit: cover; /* Recorta la imagen para que no aparezca deformada */
	object-position: center; /* Centra la imagen en el recorte */
	border-radius: 50%; /* Redondea la imagen */
}

Nuestra abeja ya tiene una apariencia perfecta para una red social o un buen Curriculum Vitae.

Actividad 1

Crea un chat entre 2 personas con el HTML adecuado. ¿Recuerdas que etiqueta se utiliza para repetir una misma estructura?

Como mínimo incorpora las siguientes partes:

Avantar: Debe ser redondo
Nombre
Fecha de creación
Mensaje

No dudes en añadir todo el CSS que creas adecuado, como font-size, color y similares.

Actividad 2

Diseña una web que te sirva como tarjeta de contacto. Debe contener:

Una imagen que ocupe todo el espacio del viewport. Evita que se deforme.
Un listado de enlaces a tus datos: Curriculum Vitae, redes sociales, email, tus otras páginas, etc.
Una estructura lógica de contenido (body > main > section > nav > ul > li > a)