Vorschaubild in Liste mit unterschiedlichem Seitenverhältnis für Mobilansicht

Veröffentlichungsdatum: 08. März 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 listDefaultThumbnail-Untervariante 134 hat dies bereits im Standard gesetzt:

Auszug aus der listDefault.scss zur listDefaultThumbnail Untervariante 134

/*@wCssFragment{class:listDefaultThumbnail;variant:134;caption:Mobil quadratisch;caption-en:Mobile quadratic;livepreview:yes}*/
.listDefaultThumbnail_var134 {

  -w-displayElements:thumbnail=yes;

  -w-option-viewportMinDefault:$viewport_m_min; /* Größe, ab der der Standardbildausschnitt angezeigt wird */    

  -w-option-picture-aspectratio:1.3333333333; /* Seitenverhältnis Bild */
  -w-option-picture-aspectratiomin:1; /* Seitenverhältnis bei kleinen Bildschirmen */
  
  -w-option-picture-mode:crop; /* Bildmodus [crop(Zugeschnitten auf Seitenverhältnis)|embed(Eingebettet)|default(Standard)]*/
  -w-option-picture-backgroundColor:''; /* Hintergrundfarbe bei transparenten Bildern */
  -w-option-picture-addCopyright:no; /* Copyright-Text ergänzen */
  -w-option-picture-copyrightTextDefault:''; /* Standard Copyright-Text, falls nichts definiert wurde */
  -w-option-picture-copyrightPrefix:'©'; /* Jedem Copyright-Text voranzustellender Text */
  
  .listEntryThumbnail {
    
    display:block;
    width:100%;
    margin-bottom:1rem;

    @media (min-width: $viewport_s_min){  
      width:33%;
      min-width:80px;
      max-width:160px;
      margin:0 1.25rem 0.25rem 0;
    }      
  }
}

Sie können die Option -w-option-picture-aspectratiomin auch 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/3 (querkant) definiert und für die Mobil-Ansicht ein Seitenverhältnis von 1 (quadratisch).