Układ treści

Proporcje i dopasowanie

Klasy pozwalające na dodanie i kontrolowanie obramowania na elemencie.

`aspect-ratio`

Ustawienie proporcji elementu

Klasa	Styl CSS
`aspectratio-auto`	`aspect-ratio: auto;`
`aspectratio-unset`	`aspect-ratio: unset;`
`aspectratio-1`	`aspect-ratio: 1 / 1;`
`aspectratio-<int-1>-<int-2>`	`aspect-ratio: <int-1> / <int-2>;`

`object-fit`

Dopasowanie elementu do rozmiaru

Klasa	Styl CSS
`fit-fill`	`object-fit: fill;`
`fit-contain`	`object-fit: contain;`
`fit-cover`	`object-fit: cover;`
`fit-none`	`object-fit: none;`
`fit-scale-down`	`object-fit: scale-down;`

Ustawienie razem z aspectratio pozawala na dopasowanie obrazka o dowolnych proporcjach do oczekiwanego layoutu strony.

<div>
    <img class="maxh-300px w-auto aspectratio-1 border--solid" src="...">
    <img class="maxh-300px w-auto aspectratio-1 border--solid fit-cover" src="...">
    <img class="maxh-300px w-auto aspectratio-1 border--solid fit-contain" src="...">
</div>

`object-position`

Pozycjonowanie elementu po dopasowaniu rozmiaru.

Wartości bezpośrednie mogą przyjmować wymiar zgodnie ze specyfikacją lub okreslenie pozycji z CSS, zgodnie ze specyfikacją:

pos-x: center, left, right
pos-y: center, top, bottom

Klasa	Styl CSS
`fitpos-center`	`object-position: center;`
`fitpos-top`	`object-position: center top;`
`fitpos-bottom`	`object-position: center bottom;`
`fitpos-left`	`object-position: left center;`
`fitpos-right`	`object-position: right center;`
`fitpos-<pos-x>-<pos-y>`	`object-position: <pos-x> <pos-y>;`
`fitpos-[<dim-1\|pos-x>_<dim-2\|pos-y>]`	`object-position: <dim-1\|pos-x> <dim-2\|pos-y>;`

<div>
    <div class="d-flex gap-8 p-6">
        <div>
            <p>fitpos-center</p>
            <img class="maxh-200px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
        </div>
        <div>
            <p>fitpos-left</p>
            <img class="maxh-200px w-auto aspectratio-1 border--solid fit-cover fitpos-left" src="/images/baloons.jpg">
        </div>
        <div>
            <p>fitpos-right</p>
            <img class="maxh-200px w-auto aspectratio-1 border--solid fit-cover fitpos-right" src="/images/baloons.jpg">
        </div>
    </div>
    <div class="d-flex gap-8 p-6">
        <div>
            <p>fitpos-[10p_center]</p>
            <img class="maxh-200px w-auto aspectratio-1 border--solid fit-contain fitpos-[center_10p]" src="/images/baloons.jpg">
        </div>
        <div>
            <p>fitpos-top</p>
            <img class="maxh-200px w-auto aspectratio-1 border--solid fit-contain fitpos-top" src="/images/baloons.jpg">
        </div>
        <div>
            <p>fitpos-bottom</p>
            <img class="maxh-200px w-auto aspectratio-1 border--solid fit-contain fitpos-bottom" src="/images/baloons.jpg">
        </div>
    </div>
</div>