Imágenes y objetos
object-fit object-position image-rendering aspect-ratio

<< regla @keyframes Sombras >>

En ocasiones, nos interesa poder adaptar ciertos objetos como imágenes, vídeos u otros a nuestra web (inputs, textarea pero no iframe, etc.). Para ello, vamos a ver ciertas propiedades CSS que nos permiten modificar estos elementos y adaptarlos al estilo que deseamos.

object-fit

Nos permitirá rellenar una imagen u objeto a su contenedor padre. Los valores que puede tomar dicha propiedad son:

fill: Rellena la imagen en el espacio del contenedor padre (la estira)
contain: Mantiene el aspecto natural pero conteniendo el máximo posible de la imgen
cover: mantiene el aspecto natural pero cubriendo el contenedor padre, por tanto no quedarán huecos sin cubrir. (se dimensiona manteniendo su aspecto, de tal forma que si no cabe se recortará para que se ajuste)
none: El contenido no se redimensiona
scale-down: Similar al none o contain pero escalando hacia abajo

main{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 200px);
  gap: 1rem;
}
img{
  width: 100%;
  height: 100%;
  /* object-fit: fill; */
  /* object-fit: contain; */
  /* object-fit: cover; */
  /* object-fit: none; */
  object-fit: scale-down;
}

object-position

Nos permite cambiar la posición donde aparece la imagen, especialmente cuando está recortada y sólo aparece un fragmento o parte de la imagen, funciona muy parecido a la propiedad background-position. Los valores se dan en píxeles, o lo más habitual es con porcentajes, por defecto el valor es 50% 50%, pero también podemos usar las palabras claves como top, left, right, bottom o center para indicar en qué zona queremos centrar la imagen o incluso poniendo un porcentaje tras estas palabras para ajustarla más.

.element img {
    object-fit: scale-down;
  /* object-position: center; */
  /* object-position: left 20% top 25%; */
  /* object-position: top right; */
}

image-rendering

Esta propiedad permite establecer para una imagen el algoritmo de escalado que se utilice. Los valores que puede utilizar image-rendering son: auto (por defecto, el navegador decide qué algoritmo de escalado utilizar), smooth (la imagen es escalada con algoritmos que priorizan la apariencia, es idóneo para fotos), high-quality (como smooth, pero con mejor calidad), crisp-edges (enfocado en mantener contrastes y bordes de imágen, ideal para bocetos), pixelated (utiliza algoritmos de “el vecino más cercano” o similares). En el siguiente enlace se puede ver cómo funciona.

img{
  width: 100%;
  height: 100%;
  object-fit: fill;
  /* image-rendering: auto; */  
  /* image-rendering: pixelated; */
  /* image-rendering: crisp-edges; */
  /* image-rendering: high-quality; */
  /* image-rendering: smooth; */
}

aspect-ratio

Con aspect-ratio podemos cambiar la proporción de aspecto entre el ancho y alto de una imagen u objeto con CSS, pudiéndonos asegurar que no se deformarán o tendrán un aspecto raro. Los valores que pueden tener esta propiedad son;