Contenidos · Medios
Images (medios fluidos)
Controla el tamaño, el recorte y el punto focal de imágenes y otros medios reemplazados con utilidades pequeñas y combinables.
Imagen fluida
.img-fluid evita desbordes y conserva la proporción natural.
Recorte predecible
Cinco clases .object-* controlan cómo ocupa la imagen su caja.
Punto focal
Nueve posiciones permiten conservar visible la zona importante del recurso.
Código + resultado
Prueba los modos de ajuste
Selecciona una clase para comparar el marcado y su efecto sobre la misma fotografía.
<div class="ratio ratio-16-9 rounded-16">
<img class="img-fluid object-contain object-center"
src="imagen.jpg"
alt="Paisaje montañoso junto a un lago">
</div>
<div class="ratio ratio-16-9 rounded-16">
<img class="img-fluid object-cover object-center"
src="imagen.jpg"
alt="Paisaje montañoso junto a un lago">
</div>
<div class="ratio ratio-16-9 rounded-16">
<img class="img-fluid object-contain object-center"
src="imagen.jpg"
alt="Paisaje montañoso junto a un lago">
</div>
<div class="ratio ratio-16-9 rounded-16">
<img class="img-fluid object-scale-down object-center"
src="imagen.jpg"
alt="Paisaje montañoso junto a un lago">
</div>
Referencia
Ajustes disponibles
Estas utilidades se aplican directamente a <img>, <video> y otros elementos reemplazados.
| Clase | Valor | Resultado | Uso recomendado |
|---|---|---|---|
.img-fluid | max-inline-size: 100% | No excede el contenedor y conserva su proporción. | Base para imágenes responsivas. |
.object-cover | object-fit: cover | Cubre toda la caja; puede recortar la imagen. | Fotos de portada, tarjetas y hero. |
.object-contain | object-fit: contain | Muestra la imagen completa sin recortarla. | Logotipos, productos e ilustraciones. |
.object-fill | object-fit: fill | Llena la caja sin conservar la proporción. | Casos controlados donde la distorsión sea aceptable. |
.object-none | object-fit: none | Conserva el tamaño natural del recurso. | Inspección o recorte a escala original. |
.object-scale-down | object-fit: scale-down | Usa el menor resultado entre none y contain. | Evitar ampliar recursos pequeños. |
object-fit necesita una caja con ancho y alto definidos para producir un recorte visible.Punto focal
Nueve posiciones
Combínalas principalmente con .object-cover, .object-contain, .object-none o .object-scale-down.
.object-center
object-position: center
.object-top
object-position: top
.object-bottom
object-position: bottom
.object-left
object-position: left
.object-right
object-position: right
.object-top-left
object-position: left top
.object-top-right
object-position: right top
.object-bottom-left
object-position: left bottom
.object-bottom-right
object-position: right bottom
Recomendaciones
Buenas prácticas con imágenes
Texto alternativo
Describe el contenido en alt; usa alt="" sólo cuando la imagen sea decorativa.
Dimensiones
Declara width y height para reservar espacio y reducir saltos de layout.
Carga eficiente
Usa loading="lazy" fuera del primer viewport y entrega formatos optimizados.
Punto focal
Ajusta object-position cuando cover pueda ocultar información relevante.