Kann ich <picture> für Bilder mit Höhen- und Breiteneinschränkung verwenden?

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.

Quelle

2015-04-21 Tigt

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

Ich glaube, ich habe es (1/2) gleich (Breite/Höhe):

<img 
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w" 
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1/2))" 
    />

Oder mit mehr Code:

<img 
    srcset="http://lorempixel.com/960/1920/sports/10/w1920/ 960w" 
    sizes="(min-aspect-ratio: 1/2) calc(100vh * (1/2)), 100vw" 
    />

Als Randbemerkung: Ich habe auch ein Skript geschrieben, das automatisch die richtigen Größen für Elterngrößen/-breiten berechnet. Sehen Sie hier die parent-fit script.

Quelle

2015-04-21 19:06:17

' aspect-ratio'! Warum habe ich mich nicht daran erinnert? Das 'calc' wird auch sehr geschätzt. – Tigt

Würde ich das für sehr dünne Viewports auch mit einem '(max-aspect-ratio: 1/2)' unterstützen? – Tigt

ich recherchierte sooo lange um das zu finden! Vielen Dank – Silentdrummer

Kann ich <picture> für Bilder mit Höhen- und Breiteneinschränkung verwenden?

Antwort

Verwandte Themen