Definir a altura e/ou a largura de cada imagem cortada e centrada

Defina todas as imagens para uma altura e largura específicas ou uma altura específica e uma largura fluida com a imagem cortada e centrada. Consulte os dois métodos abaixo:

1) Defina uma altura estática com uma largura fluida para cada imagem:

CSS personalizado:

Adicione isto à sua localização CSS personalizada ou folha de estilo preferida. Uma opção é o local CSS adicional padrão encontrado em Painel de controlo do WordPress > Aparência > Personalizar > CSS adicional.

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

O número "200px" é o que pretende que seja a altura de cada imagem.

Javascript personalizado:

Adicione este JavaScript ao seu site. Isto pode ser feito manualmente utilizando um plugin JavaScript personalizado. Para mais informações, consulte a nossa documentação aqui.

$('.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) Defina uma altura e largura estáticas para cada imagem e vídeo:

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

O número azul é a largura mínima do dispositivo para que este código tenha efeito.

Os números a vermelho são a largura e a altura de cada imagem.

O número amarelo é a largura do elemento de texto associado à publicação.

Não encontrou a sua resposta nos documentos?

Apoio ao contacto