Antworten auf deine Fragen:
Neues Thema erstellen

Bild in Hoch- und Querformat

Nedsch

Aktives Mitglied

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.
 
Zuletzt bearbeitet:

draupnir

Moderator

Teammitglied
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

Aktives Mitglied

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 ...
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.611
Beiträge
1.538.340
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben