Bilder gleiche Höhe und Größe / CSS / Template Helix 3

Hallo liebe Mitglieder,

ich habe ein Problem und hoffe, hier können mir ein paar Cracks etwas unter die Arme greifen. Es geht um folgendes Problem.

Ich habe im Page Builder zwei Spalten mit jeweils einem Bild und daneben Text. Der Text ist unterschiedlich lang, sodass leider auch die Bilder unterschiedlich hoch werden.
Da hätte ich das gerne einheitlich. Am besten Ihr schaut Ihr Euch den angehängten Screenshot an und besucht auch die Seite. Die Bilder sollen so ausgerichtet sein wie im Screenshot mit den roten durchgezogenen Linien dargestellt.

Der Link ist: http://tds.bplaced.net/index.php/com...13-spieler-neu

Vielen Dank schon einmal für die Hilfe. Ich habe mich im css dumm und dämlich gesucht.

LG

Zitat von chr-hl

wieso das???

M.E. dürften die Bilder schon ursprünglich unterschiedlich groß sein.

Christian

Ja, warum sind die unterschiedlich groß? Haben exakt die gleiche Größe. Werden aber unterschiedlich groß angezeigt, und dann stimmt natürlich auch die Symmetrie nicht und ich habe hässliche Treppen.

Danke Anka, ich komme erst morgen zum probieren. Hört sich aber logisch an

Ich gebe dann eine Rückmeldung.

Zitat von anka

Sie werden unterschiedlich hoch angezeigt, weil es Hintergrundbilder sind (mit der Eigenschaft background-size: cover) :

Code

<div style="background-image: url(/images/2018/10/17/spieler_01_klein.jpg);" class="sppb-image-holder"></div>

Eigentlich müsste der Quellcode so aussehen, damit die Höhe passt:

Code

<div class="sppb-image-holder"><img src="/images/2018/10/17/spieler_02_klein.jpg" /></div>

Also kein Hintergrundbild, sondern ein Bild im Inhalt.

Habe es mir eben doch nochmal angesehen. Da ich mit dem SP Page Builder arbeite, wäre das zu aufwändig. Weiß allerdings nicht, warum dieser Page Builder Background-Bilder da einsetzt. Steht ja schließlich nicht im Hintergrund. Gibt es da keine Möglichkeit die Custom CSS anzupassen? Das wäre die einfachste Methode.

Das ist ja das Grundgerüst für die Bilder:

.sppb-addon-image-content .sppb-image-holder {

position: absolute;

top: 0;

width: 50%;

height: 100%;

background-position: 50%;

background-size: cover;

}

Kann ich dort nichts anpassen?

Zitat von 19leunam93

Oft werden Bilder als Hintergrundbilder gesetzt, damit man das Bild weniger einfach lokal abspeichern kann. Dies macht aber nur mit einer zusätzlichen blockierung des Kontext-Menüs sinn:

Code

<--! HTML Code !-->
<div class="image1" oncontextmenu="return false;"></div>

Um trotzdem das Verhalten eines echten img-Elements zu erhalten kann man folgende CSS-Styles dem element verpassen:

Code

// CSS Code
.image1 {
    background-image: url('img/image1.jpg');
    background-repeat:no-repeat;
    -webkit-background-size:contain;
    -moz-background-size:contain;
    -o-background-size:contain;
    background-size:contain;
    background-position:center;
    width:100%;
    height:0;
    padding-top: 69%;
    // padding-top: (Höhe / Breite * 100)
}

Alles anzeigen

eventuell klappt es mit diesem CSS auch bei dir

Ich müsste das ja dann für jedes Bild mit passender URL einzeln machen. Gibt es nicht eine "einfachere" Lösung, dass ich das im Grundgerüst mache und das System es für alle anpasst. Ist halt mit dem SP Page Builder "gebaut" und der gibt Background-Bilder vor. Leider. Nicht optimal. Muss vielleicht nach einer anderen Lösung suchen.

Vielleicht hat ja noch jemand eine Idee und schon mal Danke für die bisherige Unterstützung.

Zitat von 19leunam93

In deinem Fall würde es reichen, diese CSS Regeln in deinem Template zu ergänzen (z.B mit einer custom.css):

Code

.sppb-addon-image-content .sppb-image-holder {
    background-repeat:no-repeat;
    -webkit-background-size:contain;
    -moz-background-size:contain;
    -o-background-size:contain;
    background-size:contain;
    background-position:center;
    width: 200px;
    height:0;
    padding-top: 200px;
}

.sppb-addon-image-content.aligment-left .sppb-content-holder {
    padding: 0px 0 50px 50px;
}

h3.sppb-image-content-title {
    padding: 0px 0 50px 50px;
}

@media screen and (min-width: 768px) {
   .sppb-col-sm-offset-6 {
       margin-left: 200px;
   }
}

Alles anzeigen

Wenn also alle Bilder die gleiche Grösse haben sollen, reicht eine einfache CSS-Lösung für dein Problem

Ansonsten müsste man die Zeilen, welche 200px (also die Bildergrösse) beinhalten per Overwrite, inline im php berechnen...

Lg

Alles anzeigen

Sorry, hatte mal ein paar Tage Abstand zu dem Mist gebraucht So hat es nun aber geklappt. Schönen Danke für die Hilfe!