Höhe und/oder Breite jedes Bildes beschnitten und zentriert festlegen

Setzen Sie alle Bilder auf eine bestimmte Höhe und Breite oder eine bestimmte Höhe und fließende Breite, wobei das Bild beschnitten und zentriert wird. Bitte beachten Sie die beiden folgenden Methoden:

1) Legen Sie für jedes Bild eine statische Höhe und eine fließende Breite fest:

Benutzerdefiniertes CSS:

Fügen Sie dies zu Ihrem bevorzugten benutzerdefinierten CSS-Speicherort oder Stylesheet hinzu. Eine Möglichkeit ist der standardmäßige zusätzliche CSS-Speicherort, den Sie unter WordPress-Dashboard > Erscheinungsbild > Anpassen > Zusätzliches CSS.

#cff .cff-photo, #cff .cff-html5-video, #cff .cff-event-thumb{ 
    height: 200px;
    width: 100%;
}
.cff-multiple{ overflow: hidden; }

Die Zahl "200px" ist die gewünschte Höhe der einzelnen Bilder.

Benutzerdefiniertes Javascript:

Fügen Sie dieses JavaScript zu Ihrer Website hinzu. Dies kann manuell mit einem benutzerdefinierten JavaScript-Plugin geschehen. Weitere Informationen finden Sie in unserer Dokumentation hier.

$('.cff-photo, .cff-html5-video, .cff-event-thumb').each(function(){
  $(this).find('img, video').hide();
  $(this).css({
    'background' : 'url(' + $(this).find('img').attr('src') + ') no-repeat center center',
    'background-size' : 'cover'
  });
});

2) Legen Sie für jedes Bild und Video eine statische Höhe und Breite fest:

CSS:

@media all and (min-width: 535px){ 
  #cff .cff-photo,
  #cff.cff-half-layout .cff-photo,
  #cff.cff-thumb-layout .cff-photo,
  #cff .cff-html5-video,
  #cff.cff-half-layout .cff-html5-video,
  #cff.cff-thumb-layout .cff-html5-video {
    position: relative !important;
    width: 50% !important;
    height: 300px !important;
    overflow: hidden !important;
  }
  #cff .cff-photo img,
  #cff.cff-half-layout .cff-photo img,
  #cff.cff-thumb-layout .cff-photo img,
  #cff .cff-html5-video video,
  #cff.cff-half-layout .cff-html5-video video,
  #cff.cff-thumb-layout .cff-html5-video video {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    height: 100%;
    width: auto;
    max-width: none;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }

  #cff .cff-photo img.portrait, 
  #cff.cff-half-layout .cff-photo img.portrait,
  #cff.cff-thumb-layout .cff-photo img.portrait, 
  #cff .cff-html5-video video.portrait, 
  #cff.cff-half-layout .cff-html5-video video.portrait, 
  #cff.cff-thumb-layout .cff-html5-video video.portrait { 
    position: absolute !important; 
    left: 50% !important;
    top: 50% !important; 
    height: auto; 
    width: 100%; 
    max-width: none; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
  }

  #cff.cff-half-layout .cff-text-wrapper { 
  width: 49%;
  }
}

Javascript:

$('#cff .cff-photo img').each(function(){
    var $self = $(this);
    if ($self.width() < $self.height()) {
        $self.addClass('portrait');
    }
});
$('#cff video').each(function(){
    var $self = $(this);
    if ($self.width() < $self.height()) {
        $self.addClass('portrait');
    }
});

Die blaue Zahl gibt die Mindestbreite des Geräts an, damit dieser Code wirksam wird.

Die roten Zahlen geben die Breite und Höhe der einzelnen Bilder an.

Die gelbe Zahl gibt die Breite des Textelements an, das mit dem Beitrag verknüpft ist.

Konnten Sie die Antwort nicht in den Dokumenten finden?

Kontakt zum Support