# object

The markup of every demo on <https://kuiper.oeds.it/object/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## fit

Varies: 10 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-contain"></div><p class="background-muted text-center">contain</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-cover"></div><p class="background-muted text-center">cover</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-fill"></div><p class="background-muted text-center">fill</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none"></div><p class="background-muted text-center">none</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-scale-down"></div><p class="background-muted text-center">scale-down</p></div></div>
</div>
```

## position

Varies: 18 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-top-left"></div><p class="background-muted text-center">top-left</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-top-center"></div><p class="background-muted text-center">top-center</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-top-right"></div><p class="background-muted text-center">top-right</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-center-left"></div><p class="background-muted text-center">center-left</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-center-center"></div><p class="background-muted text-center">center-center</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-center-right"></div><p class="background-muted text-center">center-right</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-bottom-left"></div><p class="background-muted text-center">bottom-left</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-bottom-center"></div><p class="background-muted text-center">bottom-center</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card"><div class="height-s background-white-dark"><img src="/images/thumbnail-1.jpg" width="480" height="270" alt="Kuiper" loading="lazy" class="width-1-1 height-1-1 object-none object-bottom-right"></div><p class="background-muted text-center">bottom-right</p></div></div>
</div>
```