Bild mit unterschiedlichem Seitenverhältnis für Mobilansicht

Veröffentlichungsdatum: 27. Februar 2023
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE

Seitenverhältnisse für Bilder auf Desktop-Ansicht können auf mobilen Endgeräten unvorteilhaft sein. Dies können Sie über die entsprechende Untervariante für das Seitenverhältnis beeinflussen.

Die mit der BASE ausgelieferte elementPictureAspectRatio-Untervariante 40 hat dies bereits im Standard gesetzt (auskommentiert):

Auszug aus der elementPicture.scss zur elementPictureAspectRatio Untervariante 40

/*@wCssFragment{class:elementPictureAspectRatio;variant:40;caption:4 / 1 querkant;caption-en:4 / 1}*/
.elementPictureAspectRatio_var40 {
  
  -w-option-aspectratio:4; /* Seitenverhältnis */
  //-w-option-aspectratioMin:1; /* Seitenverhältnis Mobilansicht */
  -w-mode:crop;  
    
  figure {
    display:block;

    picture {
      height:0 !important;
      display:block;
      padding-bottom:25%;
    }
  }  
}

Sie müssen lediglich die Zeile mit -w-option-aspectratioMin aktiv schalten oder in der von Ihnen gewünschten Untervariante mit dem passenden Wert setzen.
Im Beispiel oben ist für die Desktop-Ansicht ein Seitenverhältnis von 4/1 (querkant) definiert und bei aktivierter Einstellung für die Mobil-Ansicht ein Seitenverhältnis von 1 (quadratisch).