feat: rename to Drucken, 86 image sizes, fix the distorted crop editor

The crop frame had width:100% together with max-height, so the height was
clamped while the width stayed - the frame lost the target aspect ratio and
object-fit:fill stretched the picture into it. Measured at 390px: frame 0.843
instead of 0.778, picture 8.3% too wide. The width now follows from the allowed
height and the ratio, and the image carries its own aspect-ratio instead of a
second percentage, so it cannot stretch at all.

Dragging was fine but felt dead: at fill zoom the crop sits at the stop in one
axis. The editor now states which way it can move, double-tap zooms, arrow keys
nudge, and the zoom slider shows its factor.

Sizes: 41 -> 86 in ten groups, including US inch sizes, instant-film picture
areas, cards, DIN A0-A7 and eleven aspect ratios as physical sizes.

The tab is called Drucken now; /druck and /passbilder redirect there.
This commit is contained in:
2026-08-19 07:50:44 +00:00
parent 7289cde03a
commit 210a84dcf8
13 changed files with 259 additions and 69 deletions
+18
View File
@@ -0,0 +1,18 @@
---
import Base from '../layouts/Base.astro';
import PrintApp from '../components/PrintApp.tsx';
---
<Base title="Drucken · Klarbild">
<h1 class="seiten-titel">Drucken</h1>
<p class="seiten-lead">
Ohne KI: Bilder auf exakte Maße bringen und mehrere davon in 100-%-Größe mit
Schnittmarken auf einen Bogen setzen — vom biometrischen Passbild über den
Kita-Satz bis zum 30 × 40-Poster.
</p>
<PrintApp client:load />
<style>
.seiten-titel{font-family:var(--font-display);font-size:1.6rem;margin:6px 0 4px;letter-spacing:-.02em;}
.seiten-lead{color:var(--soft);font-size:13.5px;margin:0 0 16px;max-width:64ch;line-height:1.55;}
@media(max-width:560px){.seiten-titel{font-size:1.35rem;}.seiten-lead{font-size:12.5px;}}
</style>
</Base>