Bildhöhe 100% des Containers, Breite maximal 100% des Containers

Shopware 5 Themes & Design
1

Hallo,

vielleicht kann jemand helfen. Ich bin für jeden Tipp dankbar.

Ich würde gerne in einer Einkaufswelt ein Element einfügen, welches ein Bild beinhaltet, sonst aber nichts weiter. Das Bild soll dabei von der grösse in der Höhe automatisch so angepasst werden, dass es keinen overflow gibt, dieser aber auch nicht einfach abgeschnitten „hidden“ wird.

Ich kann das Element „Banner“ nicht nutzen, da dieses Bild dann bei einem Klick automatisch vergrössert werden soll. Dazu nutze ich das Plugin ShortCodes Bilder, bei dem ein Shortcut für ein Bild eingefügt wird. Das ist aber nicht auf Banner anwendbar, da immer sowas hier eingefügt wird statt dem Bild, damit das mit der Verrösserung funktioniert:

[Image id=„12345“ lightbox=„true“ alt=„bildname“ class=„bildname“]

Wie kann ich das mit CSS machen, dass das Bild automatisch angepasst wird und sich nach der Höhe des Containers richtet in dem es sich befindet?

lg

Wilo

2

CSS: object-fit. cover/contain => https://developer.mozilla.org/de/docs/Web/CSS/object-fit

1 „Gefällt mir“
3

@Shopwareianer schrieb:

CSS: object-fit. cover/contain => https://developer.mozilla.org/de/docs/Web/CSS/object-fit

Genau das habe ich auch gedacht, aber das will einfach nicht klappen. Ich werde es morgen noch mal mit object-fit probieren, aber contain hatte nicht funktioniert. Werde es noch mal probieren und wenn es nicht klappt, den Code hier posten.

Danke schonmal Shopwareianer

4

Ohne den Code zu sehen bzw. die live Seite kann man da schwer helfen.

1 „Gefällt mir“
5

Ich bin mir nicht mehr ganz sicher: Ging object-fit nicht von festen Angaben (Breite, Höhe) für das Bild aus? Und bei je 100% (wenn das geht) muss der Container die Höhe vorgeben. Sonst hat das img die Höhe 0.

Wie Shopwareianer schon geschrieben hat: Code (oder Codebeispiel über z.B. Codepen) wäre hilfreich.

1 „Gefällt mir“
6

Juhu. Nach weiteren fast 60 Min. habe ich es dank eurer Hilfe endlich hinbekommen.

So hab ich es gemacht:

  1. Ich habe ein Element (Textelement) erstellt mit class: containerclass
  2. Darin habe ich ein img in einem weiteren Div eingefügt, der DIV hat class: imagedivclass

Die Ausgabe im Frontend ist dann:

 (das erscheint mir falsch, aber das PlugIn Shortcodes Bilder macht es so)

Das CSS dazu:

.containerclass div.emotion--html.panel.has--border div.html--content.panel--body.is--wide {
height:100%;
}

.containerclass div.emotion--html.panel.has--border div.html--content.panel--body.is--wide p {
display: none;
}

.imagedivclass {
width: 100%;
height: 100%;
object-fit: contain;
}

.imagedivclass img {
margin-left: auto;
margin-right: auto;
}

Herzlichen Dank,

Wilo