Bild in Hoch- und Querformat

[Nedsch]

Ein Kunde von mir möchte auf seiner Website ein Foto prominent platzieren. Dieses Foto soll sich automatisch anpassen. Ins Format 16:9 für die Desktop-Version. Und ins Format 4:6 für die Mobile-Version.

Nun ist auf dem Foto ein Element, dass eher am Rand steht. Dieses Element soll auch bei der Mobile-Version sichtbar sein. Lässt sich die Position des Bildes bestimmen? Als ob es einen Bilderrahmen in 4:6 gibt, und in diesem Rahmen kann das Bild verschoben werden. Oder muss darauf geachtet werden, dass das Element auf dem Foto mittig platziert ist? Bei einem möglichst quadratischem Foto.

 

[draupnir]

Hallo Nedsch,
es gibt drei Möglichkeiten ein Bild in zwei Formaten in einer Website für Desktop und Mobile zu zeigen:

1. Es gibt das Bild zweimal
Du erstellst eine zweite Version des Bildes in dem gewünschten 4:6-Format in Photoshop und Co. Über @media kann dann dieses im Falle des mobilen Webs gezeigt werden. Vorteil: Du zeigst dann genau den gewünschten Ausschnitt. Auch kannst Du das Bild in der Größe reduzieren und bekommst weniger Daten und schnellere Ladezeiten.

2. Eine CSS-Lösung
div.bild {
width:100px;
height:100px;
overflow:hidden;
}
div.bild img {
margin-top:-20px;
margin-left:-20px;
}
Auch diese Variante (die Werte für Breite, Höhe und Verschiebung musst Du selbst anpassen), wird mit @media gesteuert.

3. Ein Javascript
wäre in meinen Augen nur die Notlösung, wenn 1 oder 2 nicht gangbar sind.

Viel Erfolg,
– j.

 

[Nedsch]

Vielen Dank für die ausführliche Antwort. Lösung 1 erscheint mir spontan am sympathischsten. Denn dann weiß ich genau, wie das Bild später aussehen wird. Und es können jeweils noch kleine Anpassungen gemacht werden. Ich spreche mal mit dem Kunden ...

 

[Myhar]

Mit dem picture element kannst du für verschiedene mediaqueries unterschiedliche Bilder anzeigen. (in dem Beispiel wird für verschiedene orientations ein anderes Bild geladen, hier kann jedoch jedes Mediaquery benutzt werden)

Mittels aspect-ratio kann das Seitenverhältnis eines Elements festgelegt werden. Eine Lösung mit negativem margin wie von @draupnir beschrieben ist heutzutage nicht mehr nötig.

 

[dn3d_fanboy]

Schau dir mal die CSS-Eigenschaften object-fit und object-position an:
https://www.w3schools.com/css/css3_object-fit.asp
https://www.w3schools.com/css/css3_object-position.asp

Die Höhe und Breite kannst du dann über media-queries für die entsprechenden Auflösungen steuern.

 

[Nedsch]

Danke für die Hinweise. Für mich auf jeden Fall gut zu wissen, dass es Lösungen gibt.