Impostazione dell'altezza e/o della larghezza di ogni immagine ritagliata e centrata

Impostare tutte le immagini su un'altezza e una larghezza specifiche o su un'altezza specifica e una larghezza fluida con l'immagine ritagliata e centrata. Si vedano i due metodi seguenti:

1) Impostare un'altezza statica con una larghezza fluida per ogni immagine:

CSS personalizzato:

Aggiungerlo alla posizione o al foglio di stile CSS personalizzato che si preferisce. Un'opzione è la posizione CSS aggiuntiva predefinita che si trova in Dashboard di WordPress > Aspetto > Personalizza > CSS aggiuntivo.

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

Il numero "200px" corrisponde all'altezza di ciascuna immagine.

Javascript personalizzato:

Aggiungete questo JavaScript al vostro sito. Questo può essere fatto manualmente utilizzando un plugin JavaScript personalizzato. Per ulteriori informazioni, consultare la nostra documentazione qui.

$('.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) Impostare un'altezza e una larghezza statiche per ogni immagine e video:

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');
    }
});

Il numero blu è la larghezza minima del dispositivo affinché il codice abbia effetto.

I numeri rossi rappresentano la larghezza e l'altezza di ciascuna immagine.

Il numero giallo è la larghezza dell'elemento di testo associato al post.

Non è stato possibile trovare la risposta nei documenti?

Contatto con l'assistenza