Automatisches Anpassen Teaser-Grafik bei unterschiedlichen Geräten

Deutsch Spreadshop
#1

Hallo zusammen,

ich möchte meinen Shop gerne so konfigurieren, dass die Teaser-Grafik auf der Startseite automatisch an die ideale Darstellungsform des jeweiligen Mediums (Desktop, Tablet, Handy) angepasst/skaliert wird.

Wenn ich lediglich eine Grafik verwende, dann funktioniert der folgende CSS-Code wunderbar:

.sprd-startpage-teaser__plain-image {
width: 100%
}

Ich möchte jedoch zusätzlich eine Überschrift und eine Kurzbeschreibung über dem Bild haben. So schön, so gut, dafür gibt es ja die Standardeinstellung.

NUR: in diesem Fall klappt leider das automatische Skalieren mit dem obigen Code nicht.

Kann mir hier jemand weiterhelfen?

Vielen Dank.

Liebe Grüße

#2

Das Problem ist, dass, wenn Du einen Teaser mit nur dem Bild hast, wir die Größe der Höhe ändern können, so dass es möglich ist, immer das komplette Bild anzuzeigen. Dies ist nicht der Fall, wenn Du eine Überschrift, einen Text und vielleicht eine Schaltfläche hinzufügst. In diesem Fall haben wir eine minimale Höhe (derzeit 320px) und müssen die Seiten des Bildes zuschneiden, wenn der Browser zu eng wird. Wenn wir das nicht tun würden, dann wäre der Text außerhalb des Bildes und das Ergebnis würde schrecklich aussehen. Die einzige Lösung, wenn Du den Text und das Bild in der Größe ändern möchtest, wäre, den Text direkt zum Bild hinzuzufügen.

#3