/* * Bilddarstellung der Zauner-Medienverwaltung. * Diese Datei wird von media_start() automatisch in eingebunden. * Sie liegt bewusst nach site.css und korrigiert nur verwaltete Bilder. */ img.managed-media { display: block; max-width: 100%; box-sizing: border-box; object-position: var(--media-focus-x, 50%) var(--media-focus-y, 50%) !important; } /* Natürlich: vollständiges Bild, ursprüngliches Seitenverhältnis. */ img.managed-media[data-fit="natural"] { width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; } /* Einpassen: Bild vollständig innerhalb eines vorhandenen Rahmens zeigen. */ img.managed-media[data-fit="contain"] { max-width: 100%; object-fit: contain !important; object-position: var(--media-focus-x, 50%) var(--media-focus-y, 50%) !important; } /* Füllen: Rahmen vollständig füllen; Zuschnitt ist möglich. */ img.managed-media[data-fit="cover"] { max-width: 100%; object-fit: cover !important; object-position: var(--media-focus-x, 50%) var(--media-focus-y, 50%) !important; } /* Hero-Bilder sollen nicht durch starre globale Höhen verzerrt werden. */ .hero-media img.managed-media[data-fit="natural"], .hero-visual img.managed-media[data-fit="natural"] { width: 100%; height: auto !important; } .hero-media img.managed-media[data-fit="contain"], .hero-visual img.managed-media[data-fit="contain"] { width: 100%; height: 100%; object-fit: contain !important; } /* Buchcover, Scans und ähnliche Hochformate: niemals abschneiden. */ .book-cover img.managed-media, .book-card .book-cover img.managed-media { width: 100%; height: 100%; object-fit: contain !important; object-position: center center !important; } /* In Karten dürfen Contain-/Natural-Bilder ihr Seitenverhältnis behalten. */ .media-card > img.managed-media[data-fit="natural"], .media-card > img.managed-media[data-fit="contain"], .download-card > img.managed-media[data-fit="natural"], .download-card > img.managed-media[data-fit="contain"] { width: 100%; height: auto !important; aspect-ratio: auto !important; } /* Verständliche Standardgrößen für neue Einfügecodes. */ img.media-size-small { width: min(100%, 240px) !important; height: auto !important; } img.media-size-medium { width: min(100%, 480px) !important; height: auto !important; } img.media-size-large { width: min(100%, 800px) !important; height: auto !important; } img.media-size-full { width: 100% !important; height: auto !important; }