miércoles, 15 de marzo de 2017

object-fit para corregir aspect ratio

Si se tiene una imagen, cuando se establece sus dimensiones con estilos:

.my-img {
  width: 150px;
  height: 150px;
}

Si la imagen tiene un aspect ratio distinto (a 1 en este caso), se estirará para entrar en la caja.

Yo lo solucionaba colocando la imagen com background e indicando background-size: cover

Hoy encontré otra forma, que me parece mejor:

.my-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}