Mantener la forma en CSS

Una propiedad reemplaza el truco del porcentaje en padding-top que todos memorizaban.

.thumb {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 0.5rem;
}

.avatar {
  inline-size: 3rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.embed {
  aspect-ratio: 4 / 3;
  inline-size: 100%;
  border: 0;
}

Cómo funciona

1. aspect-ratio fija el alto a partir del ancho, o al revés.
2. object-fit decide cómo la imagen llena la caja que le tocó.
3. object-position mueve la parte visible cuando toca recortar.

Palabras clave y builtins usados aquí

• border
• rem

El intento, en números

Líneas

20

Caracteres a escribir

270

Tokens

72

Ritmo de tres estrellas

85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 51 segundos.

Escribe este fragmento

Paso 2 de 3 en Dimensionado; paso 15 de 24 en Flexbox y grid.

← Anterior Siguiente →