Establecer la altura y/o anchura de cada imagen recortada y centrada

Ajuste todas las imágenes a una altura y anchura específicas o a una altura y anchura fluidas con la imagen recortada y centrada. Consulte los dos métodos siguientes:

1) Establezca una altura estática con una anchura fluida para cada imagen:

CSS personalizado:

Añada esto a su ubicación CSS personalizada u hoja de estilos preferida. Una opción es la ubicación CSS adicional predeterminada que se encuentra en Panel de WordPress > Apariencia > Personalizar > CSS adicional.

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

El número "200px" es lo que quieres que sea la altura de cada imagen.

Javascript personalizado:

Añada este JavaScript a su sitio. Esto puede hacerse manualmente utilizando un plugin JavaScript personalizado. Para más información, consulte nuestra documentación aquí.

$('.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) Establece una altura y anchura estáticas para cada imagen y 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');
    }
});

El número azul es la anchura mínima del dispositivo para que este código surta efecto.

Los números rojos son la anchura y la altura de cada imagen.

El número amarillo es la anchura del elemento de texto asociado a la entrada.

¿No ha encontrado la respuesta en los documentos?

Contacto