Lección 7: Imagenes

Definir tamaño

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 */
}

Vemos como funciona.

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.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario