Ich habe eine Art Diashow, bei der Bilder so groß wie möglich gedehnt werden, aber die Breite oder Höhe des Ansichtsfensters nicht überschreiten. Grundsätzlich object-fit: contain.Kann ich <picture> für Bilder mit Höhen- und Breiteneinschränkung verwenden?
Ich möchte diese Bilder reagieren, da "so groß wie sie können" für ein Telefon und einen großen Desktop ist der große Unterschied. Ich kann nicht <img srcset> verwenden, weil es gerade jetzt Bildschirmdichte (x Deskriptoren) oder Breite (w Deskriptoren). So lässt <picture> manuell die Auswahllogik selbst vornehmen.
Ich begann mit:
<picture>
<source media="(orientation:portrait)"
sizes="(max-width: 1200px) 100vw, 1200px"
srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
<source sizes="(max-width: 1200px) 100vw, 1200px"
srcset="300.jpg 300w, 500.jpg 500w, 800.jpg 800w, 1200.jpg 1200w">
<img src="default.jpg" alt="a man slipping on a banana peel">
</picture>
Aber es ist nicht so einfach, wie die Ausrichtung des Bildschirms, da die tatsächliche Aspekt beteiligten Verhältnisse ziemlich exotische bekommen können, sowohl für die Ansichtsfenster (sehr groß Telefone, Browser-Toolbars, etc.) und für die Bilder selbst; Das gleiche Bild ist möglicherweise auf einem Bildschirm auf die Breite beschränkt, auf einem anderen jedoch auf die Höhe beschränkt. Ich denke, dass ich ein Skript schreiben kann, das die Seitenverhältnisse analysiert, aber ich bin auf der Logik ratlos, um das in eine sinnvolle srcset und sizes Liste umzuwandeln.
Idealer<img srcset> wird get the h descriptor soon, aber ich würde gerne etwas zusammen hacken, die jetzt funktionieren.
Mein Kopf funktioniert derzeit nicht, aber Sie sollten nur die Größen ändern müssen und wenn Sie alles mit JS tun, müssen Sie nur einen Größenwert in Pixel berechnen, also nicht so schwer. (Ich könnte versuchen, dafür ein lazySizes-Plugin zu machen). –
Im Allgemeinen, wenn es immer das Ansichtsfenster ist und nicht ein kleineres Element, das Sie verwenden, als wenn Sie Breite beschränkt immer Größen = "100vw" und wenn es Höhe eingeschränkt ist sizes = "calc (100vh * (heightOfImage/widthOfImage)) " –
Für den grundlegenden Proof-of-Concept, ja, es wird das gesamte Ansichtsfenster sein, aber in der Produktion wird es Bilder in verschiedenen Containern sein – Tigt