# Images (medios fluidos)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/images.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Contenidos · Medios

Controla el tamaño, el recorte y el punto focal de imágenes y otros medios reemplazados con utilidades pequeñas y combinables.

v2.0

↔

## 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.

i

## Composición recomendada
Usa `.img-fluid` para imágenes responsivas. Cuando la caja tenga ancho y alto definidos, combina una utilidad de ajuste con una de posición.

Código + resultado

## Prueba los modos de ajuste

Selecciona una clase para comparar el marcado y su efecto sobre la misma fotografía.

HTML

Resultado aplicado  Responsivo · 16:9

Imagen real

![Paisaje montañoso junto a un lago](https://picsum.photos/id/1015/900/600)

.img-fluid mantiene la imagen responsiva; .object-contain evita deformarla dentro del contenedor 16:9.

```html
<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>
```

.object-cover llena la caja y recorta lo necesario; .object-center conserva el centro como punto focal.

```html
<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>
```

.object-contain muestra el recurso completo; el espacio sobrante pertenece a la caja contenedora.

```html
<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>
```

.object-scale-down reduce el recurso sólo cuando es necesario y nunca lo amplía por encima de su tamaño natural.

```html
<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 ``, ` ` 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. |

Regla del sistema  `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`.

Centro

`.object-center`
`object-position: center`

Superior

`.object-top`
`object-position: top`

Inferior

`.object-bottom`
`object-position: bottom`

Izquierda

`.object-left`
`object-position: left`

Derecha

`.object-right`
`object-position: right`

Superior izquierda

`.object-top-left`
`object-position: left top`

Superior derecha

`.object-top-right`
`object-position: right top`

Inferior izquierda

`.object-bottom-left`
`object-position: left bottom`

Inferior derecha

`.object-bottom-right`
`object-position: right bottom`

Recomendaciones

## Buenas prácticas con imágenes

01
### Texto alternativo
Describe el contenido en `alt`; usa `alt=""` sólo cuando la imagen sea decorativa.

02
### Dimensiones
Declara `width` y `height` para reservar espacio y reducir saltos de layout.

03
### Carga eficiente
Usa `loading="lazy"` fuera del primer viewport y entrega formatos optimizados.

04
### Punto focal
Ajusta `object-position` cuando `cover` pueda ocultar información relevante.