ZP15 TOP Responsive: Wie bekomme ich ein Foto randlos?

Sie möchten also gerne ein Foto als Container-Hintergrund haben, möchten aber auch, dass sich die Höhe des Containers abhängig vom Seitenverhältnis des Bilds so anpasst, dass das Hintergrundbild nicht beschnitten wird. Richtig?

Hallo Uwe,

ich verstehe Ihre Beschreibung so, dass Sie das Foto per Widget im Raster des Container einfügen, als als Bild oder in einem Text.

Wenn Sie das Foto stattdessen in den Darstellungsoptionen des Containers einfügen, wird es randlos dargestellt. Die Größe des Bildes hängt dann aber vom Container ab: Je höher der Container, desto mehr Höhe vom Bild wird angezeigt.

Ok, ich gehe mal davon aus, dass Sie Version 15 nutzen:

• Zunächst müssen wir den Faktor der Foto-Höhe im Verhältnis zur Breite ermitteln. Bei einem Foto mit 1024px Breite und 768px Höhe ist das 768/1024=0,75 also 75% der Breite.
• Wenn der Container randlos dargestellt wird, nimmt er ja 100% Breite des sogenannten Viewports ein (Fensterbreite). Das machen wir uns zu Nutze, denn es gibt die Maßeinheiten vw und vh (Viewport-Width und -Height).
• Nun bearbeiten Sie die Container-Eigenschaften im Tab "Darstellung" (klick auf das Zahnrad-Icon" bei Mouse-Over über den Container bzw. Artikel darin)
• Wählen Sie bei Hintergrundbild ein Bild aus und wählen Sie bei "Größe" die Option "size" und geben Sie im Feld darunter (Werte für X) 100 gefolgt von % ein – das Feld darunter bleibt unverändert auf "auto". Klicken Sie OK, um die Hintergrundbild-Einstellungen zu beenden
• Im Feld "Inline-CSS" des Containers geben Sie nun den in der Rechnung oben ermittelten Faktor ein, also um bei diesem Beispiel hier zu bleiben: min-height: 75vw; das weist dem Container eine Mindesthöhe von 75% der Fensterbreite zu und dadurch erhält der Container das selbe Seitenverhältnis wie das Bild.

Sollte der Container sehr viel Text beinhalten, kann seine Höhe größer als die Bildhöhe werden und dann füllt das Bild eben nicht mehr den kompletten Container aus, wird aber nie angeschnitten.

Ggf. den Text einfach in einem Container darüber platzieren?

Wenn er in einem separaten Container ist, kann er sich nicht über das Bild des nachfolgenden, oder vorherigen schieben.

Das Bild bei Auflösungen die größer sind als das Bild selber zu strecken wäre mit etwas HTML zu lösen.

Folgendes sollte funktionieren.

• Kopiere folgenden HTML-Code in den Windows-Explorer <img style="width:100%" title="" alt="" src="oid://image/1234">
• "Erweitert > Bilder" hier dein Bild Importieren
• Anschließend mit der Maus über das Bild fahren und auf das Zahnrad-Symbol klicken "Eigenschaften > Weiteres > Haken bei Bild schützen setzen".
• Anschließend mit der Maus über das Bild fahren und auf das Zahnrad-Symbol klicken "Mehr > Objekt-ID kopieren"
• Ersetze im Windows-Explorer das Rot markierte oid://image/1234 durch die kopierte Objekt-ID.
• Nun fügst du an der gewünschten Stelle das Widget Quelltext mit dem Code aus dem Windows-Explorer ein.

Viel geschrieben, ist aber schnell erledigt.

Ups, was ich vergessen habe zu erwähnen. Dem Widget Quelltext muss hier noch die CSS-Klasse zpBreakout zugewiesen werden.

Das mit dem normalen Bild-Widget und hinzufügen der Klasse "zpBreakout" funktioniert übrigens generell sehr gut. Allerdings ist das Layout-Abhängig. Nicht alle Layouts können die "randlos"-Darstellung unterstützen, weil z.B. links oder rechts noch ne Spalte für die Navi ist, oder das Layout den Inhalt in einem Rahmen darstellt der nie über die ganze Fensterbreite gehen soll etc.

Die "randlos"-Unterstützung in unseren Layout ist dadurch gekennzeichnet, dass im HTML-Knoten die Klasse "supportsbreakout" zugewiesen ist. Ist diese Klasse vorhanden, dann unterstützt das Layout die randlose Darstellung und etwaiges JavaScript das mit der Darstellung hilft wird in diesem Layout entsprechend ausgeführt.

Top-Responsive hat im HTML-Knoten keine Klasse "supportsbreakout", obwohl es eigentlich ein 1-Spaltiges Layout ist und die randlose Darstellung gut unterstützen könnte… Warum das so ist, muss ich den Kollegen Steffen T. fragen, wenn er wieder aus dem Urlaub zurück ist…

Oh sorry, ich hatte nicht bemerkt um welches Layout sich handelt, es steht ganz groß in der Überschrift.

In diesem Layout ist ein Padding für Randlos vorgesehen. Das kann man aber mit folgendem CSS abändern.

Einstellungen > CSS

<style>
div.zpgrid .zpBreakout {
    padding: 0 0;
}
</style>

Zitat von Mario

In diesem Layout ist ein Padding für Randlos vorgesehen. vorgesehen. Das kann man aber mit folgendem CSS abändern.

Das sollte man nur machen, wenn man sich ganz, ganz sicher ist, was man da tut. Das kann ungeahnte Folgen nach sich ziehen. Der Ersteller des Layouts hat diese Einstellung ja sicher aus einem bestimmten Grund gemacht… Am besten mal abwarten, was der Kollege Steffen T. dazu sagt. Der ist ab dem 24.6. wieder aktiv.

Solche "CSS-Einstellungen" können uns vom Support einige Mühe verursachen, weil uns Nutzer, die Darstellungsprobleme haben, nie vorab erzählen, das Sie etwa solche Anpassungen gemacht haben und das dann erstmal rauszufinden ist meist relativ zeitaufwändig.

Da war ich wohl etwas vorschnell.

Stefan S hat natürlich recht. Dies könnte durchaus zu Darstellungsproblemen führen.

Aber folgendes sollte funktionieren und hat keine Auswirkungen auf andere Darstellungen im Layout.

• Entferne den CSS-Code wieder aus Einstellungen > CSS
• Gib dem "Widget Quelltext" das Inline-CSS: padding: 0 0