Eingangsbilder: Desktop – mobil, Querformat – Hochformat

Warum verwendest du für die Bild-Breite nicht einfach 100% und Höhe ergibt sich dann automatisch.

Einen Zoom auf ausgewählten Bildausschnitte bei kleineren Displays realisieren...

also wenn du so ein Plugin findest bitte unbedingt hier posten

Du kannst das Bild mit

background-size: cover; anpassen.

Oder 1 Bild für PC und ein anderes Bild für Mobile.

Das hängt tasächlich von Deinem Template ab. Welches benutzt Du?

Wenn Du das Cassiopeia benutzt findest Du im Template-Ordner einen 'CSS' Ordner und da hinein gehört eine CSS Datei namens 'user.css'....

Da packst Du den Code rein.

MFG

Zitat von Matzeweb

Das hängt tasächlich von Deinem Template ab. Welches benutzt Du?

Oh.... Ich noch viel lernen muß!

Zitat von Streethawk68

Nun denn, wohin mit dem CSS-Befehl?

Gewöhnlich in eine custom.css oder user.css

Kenne mich aber mit YT nicht aus.

Vielleicht gibt es in den Template-Optionen ein Feld für custom css

Zitat von Stef

background-size: cover;

So kann man ihn auch nicht in die css übertragen.

Da gehört mehr dazu.

Konnte das Problem auf der Seite aber noch nicht finden.

Am besten mit 2 Bilder. Aber YooTheme kenne ich nicht.

laut Google kannst Du in den ordner /templates/yootheme/css/ eine custom.css einfügen.....

Da das Bild aber keine eigene class hat....

wirst Du es leider über CSS gar nicht ansprechen können. Höchstens mit .uk-margin-medium-top aber das verändert dann auch die Bilder auf den Unterseiten.....

Es sei denn Ich habe wieder etwas falsch verstanden....... Ich übe ja noch!

background-size: cover; hilft hier nicht, weil das Bild nicht als Hintergrundbild angelegt ist.

Wie hast du das Bild eingefügt? Direkt im Artikel oder als Element in YOOtheme?

Zitat von Streethawk68

Hallö? Kommt noch was?

Bestimmt!

Vielleicht im YOOtheme-Forum?

Zitat von Streethawk68

Hallo!

Ich könnte mir vorstellen, dass die Tatsache, dass Eingangsbilder einer Site in der Desktop-Ansicht meist quer und in der Mobilansicht meist im Hochformat dargestellt werden müssen, die Webdesigner immer wieder vor eine gewisse Herausforderung stellt. Auf den Seiten

https://www.jutta-koenigs.de/

und

https://www.alexianer-aachen.de/

ist das recht schön gelöst: nur ein mittlerer Teil des Desktop-Bildes wird für das Hochformat verwendet. Man kann es auch so lösen, wie bei

https://www.ruedigerhans.de/

wo in der Mobilansicht ein ganz anderes Bild Verwendung findet.

Was ich möchte (Problem):

Auf der Seite

https://www.ibba-lindenhof.de/

soll in der Mobilansicht ein enger Ausschnitt der Gesichter zu sehen sein, eben so, wie bei der Jutta Königs und den Alexianern Aachen. Wie realisiere ich das in Joomla?

Grüße, Streethawk68

Alles anzeigen

Hallo Streethawke68,
ich beschäftige mich schon länger mit der Thematik (unterschiedliche Bilder für Viewports) und muss dir leider sagen dass es keine 100%ig tolle Lösung für Joomla gibt (auch keine Komponente oder Plugin). Du musst immer irgendwie Abstriche machen oder Kompromisse eingehen.

Aber nun zu deinem Problem

Versuche mal dem Bild selbst folgenden Style zu verpassen, das scheidet dir zumindest rechts und links einen Teil des Bildes ab:
height: 500px; object-fit: cover

Mit der Höhe kannst du noch ein wenig spielen, je nachdem wie du den Ausschnitt haben willst. Wie gesagt, das ist halt alles nur ein Kompromiss und ein Workaround zum Problem.

Gruß vom Lizzard

Responsive images - Learn web development | MDN

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing…

developer.mozilla.org

HTML Responsive Images Guide | CSS-Tricks

This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things…

css-tricks.com

Responsive Tab

Responsive Images

The ultimate images solution for Joomla 4

responsive-images.dgrammatiko.dev

Responsive Bilder in Joomla - Was kann man machen? | Host Europe Blog

Unsere Joomla Expertin erklärt Ihnen, wie Sie Responsive Bilder in Joomla erstellen, die sich an die Größe der Displays der jeweiligen Devices anpassen.

www.hosteurope.de

Zitat von drmenzelit

https://developer.mozilla.org/en-US/docs/Lea…sponsive_images

https://css-tricks.com/a-guide-to-the…syntax-in-html/

https://www.joomlacontenteditor.net/support/docume…/responsive-tab

https://responsive-images.dgrammatiko.dev/

https://www.hosteurope.de/blog/responsiv…ann-man-machen/

All das, wird sein Problem nicht lösen Seine Frage ging ja in Richtung "Art-Direction".