Mathis/sharp
1
0
Fork 0
mirror of https://github.com/lovell/sharp.git synced 2025-07-09 18:40:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Docs: ensure 'fit' values are clearly separated

Browse Source 
Smaller text, slightly closer to image, varied fill colour
This commit is contained in:
Lovell Fuller 2023-07-21 23:07:57 +01:00
parent f908987f35
commit 8370935ccf
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/image/api-resize-fit.svg
View File

@ -39,24 +39,24 @@
<rect x="22" y="28" width="24" height="132" fill="#fff" opacity="0.5"/> <rect x="22" y="28" width="24" height="132" fill="#fff" opacity="0.5"/>
<rect x="178" y="28" width="24" height="132" fill="#fff" opacity="0.5"/> <rect x="178" y="28" width="24" height="132" fill="#fff" opacity="0.5"/>
<rect x="48" y="30" width="128" height="128" fill="none" stroke="#000" stroke-width="4"/> <rect x="48" y="30" width="128" height="128" fill="none" stroke="#000" stroke-width="4"/>
<text x="112" y="90%" dominant-baseline="middle" text-anchor="middle" font-size="48" font-weight="bold">cover</text> <text x="112" y="85%" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="32" font-weight="bold">cover</text>
</g> </g>
<g id="contain"> <g id="contain">
<rect x="240" y="30" width="128" height="128" fill="url(#img)" stroke="#000" stroke-width="4"/> <rect x="240" y="30" width="128" height="128" fill="url(#img)" stroke="#000" stroke-width="4"/>
<text x="304" y="90%" dominant-baseline="middle" text-anchor="middle" font-size="48" font-weight="bold">contain</text> <text x="304" y="85%" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="32" font-weight="bold" fill="#555">contain</text>
</g> </g>
<g id="fill"> <g id="fill">
<rect x="432" y="30" width="128" height="128" fill="url(#img-fill)" stroke="#000" stroke-width="4"/> <rect x="432" y="30" width="128" height="128" fill="url(#img-fill)" stroke="#000" stroke-width="4"/>
<text x="496" y="90%" dominant-baseline="middle" text-anchor="middle" font-size="48" font-weight="bold">fill</text> <text x="496" y="85%" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="32" font-weight="bold">fill</text>
</g> </g>
<g id="inside"> <g id="inside">
<rect x="624" y="48" width="128" height="92" fill="url(#img)" stroke="#000" stroke-width="4"/> <rect x="624" y="48" width="128" height="92" fill="url(#img)" stroke="#000" stroke-width="4"/>
<rect x="624" y="30" width="128" height="128" fill="none" stroke="#000" stroke-width="4" stroke-dasharray="12 4" stroke-dashoffset="6"/> <rect x="624" y="30" width="128" height="128" fill="none" stroke="#000" stroke-width="4" stroke-dasharray="12 4" stroke-dashoffset="6"/>
<text x="688" y="90%" dominant-baseline="middle" text-anchor="middle" font-size="48" font-weight="bold">inside</text> <text x="688" y="85%" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="32" font-weight="bold" fill="#555">inside</text>
</g> </g>
<g id="outside"> <g id="outside">
<rect x="792" y="30" width="176" height="128" fill="url(#img)" stroke="#000" stroke-width="4"/> <rect x="792" y="30" width="176" height="128" fill="url(#img)" stroke="#000" stroke-width="4"/>
<rect x="816" y="30" width="128" height="128" fill="none" stroke="#000" stroke-width="4" stroke-dasharray="12 4" stroke-dashoffset="-2"/> <rect x="816" y="30" width="128" height="128" fill="none" stroke="#000" stroke-width="4" stroke-dasharray="12 4" stroke-dashoffset="-2"/>
<text x="880" y="90%" dominant-baseline="middle" text-anchor="middle" font-size="48" font-weight="bold">outside</text> <text x="880" y="85%" dominant-baseline="middle" text-anchor="middle" font-family="sans" font-size="32" font-weight="bold">outside</text>
</g> </g>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB