ztimson/css-utils
1
0
Fork 0
generated from ztimson/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed object fit demo
All checks were successful
Publish Library / Build Container (push) Successful in 14s
Details
Publish Library / Build NPM Project (push) Successful in 17s
Details
Publish Library / Tag Version (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Zakary Timson
2026-07-25 03:36:49 -04:00
parent 23f9666b8a
commit cbab6e920f
1 changed files with 10 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
index.html
View File

@@ -971,47 +971,32 @@
<div class="syntax">.fit-[bp]-[contain|cover|fill|scale|none]</div> <div class="syntax">.fit-[bp]-[contain|cover|fill|scale|none]</div>
<div class="demo-card flex-r gap-3 flex-wrap"> <div class="demo-card flex-r gap-3 flex-wrap">
<div class="flex-c align-items-center gap-2"> <div class="flex-c align-items-center gap-2">
<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px"> <div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
<svg viewBox="0 0 100 60" class="fit-contain" style="width:100%;height:100%"> <img src="./wave.webp" alt="wave" class="w-100 h-100 fit-contain">
<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-primary)" opacity="0.5"/>
<circle cx="50" cy="30" r="12" fill="var(--theme-primary)"/>
</svg>
</div> </div>
<span class="fs-1 fg-muted">.fit-contain</span> <span class="fs-1 fg-muted">.fit-contain</span>
</div> </div>
<div class="flex-c align-items-center gap-2"> <div class="flex-c align-items-center gap-2">
<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px"> <div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
<svg viewBox="0 0 100 60" class="fit-cover" style="width:100%;height:100%"> <img src="./wave.webp" alt="wave" class="w-100 h-100 fit-cover">
<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-accent)" opacity="0.5"/>
<circle cx="50" cy="30" r="12" fill="var(--theme-accent)"/>
</svg>
</div> </div>
<span class="fs-1 fg-muted">.fit-cover</span> <span class="fs-1 fg-muted">.fit-cover</span>
</div> </div>
<div class="flex-c align-items-center gap-2"> <div class="flex-c align-items-center gap-2">
<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px"> <div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
<svg viewBox="0 0 100 60" class="fit-fill" style="width:100%;height:100%"> <img src="./wave.webp" alt="wave" class="w-100 h-100 fit-fill">
<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-info)" opacity="0.5"/>
<circle cx="50" cy="30" r="12" fill="var(--theme-info)"/>
</svg>
</div> </div>
<span class="fs-1 fg-muted">.fit-fill</span> <span class="fs-1 fg-muted">.fit-fill</span>
</div> </div>
<div class="flex-c align-items-center gap-2"> <div class="flex-c align-items-center gap-2">
<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px"> <div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
<svg viewBox="0 0 100 60" class="fit-scale" style="width:100%;height:100%"> <img src="./wave.webp" alt="wave" class="w-100 h-100 fit-scale">
<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-success)" opacity="0.5"/>
<circle cx="50" cy="30" r="12" fill="var(--theme-success)"/>
</svg>
</div> </div>
<span class="fs-1 fg-muted">.fit-scale</span> <span class="fs-1 fg-muted">.fit-scale</span>
</div> </div>
<div class="flex-c align-items-center gap-2"> <div class="flex-c align-items-center gap-2">
<div class="b-1 br-2 overflow-hidden" style="width:100px;height:80px"> <div class="b-1 br-2 overflow-hidden" style="width:200px;height:160px">
<svg viewBox="0 0 100 60" class="fit-none" style="width:100%;height:100%"> <img src="./wave.webp" alt="wave" class="w-100 h-100 fit-none">
<rect x="10" y="10" width="80" height="40" rx="4" fill="var(--theme-warn)" opacity="0.5"/>
<circle cx="50" cy="30" r="12" fill="var(--theme-warn)"/>
</svg>
</div> </div>
<span class="fs-1 fg-muted">.fit-none</span> <span class="fs-1 fg-muted">.fit-none</span>
</div> </div>