Cómo crear una imagen de altura completa y proporcional con CSS en Elementor PRO

Con este sencillo código CSS, puedes garantizar que las imágenes dentro de Elementor PRO se ajusten a la altura completa del contenedor, manteniendo siempre una proporción adecuada.

El código asegura que las imágenes ocupen el 100% de la altura disponible, manteniendo el objeto centrado y bien ajustado para evitar distorsiones.

Este truco es ideal para fondos y elementos visuales que requieren una presentación profesional y responsiva.

CÓDIGO CSS

CSS personalizado para imágenes específicas

selector, 
selector .elementor-widget-container, 
selector .elementor-image, 
selector .elementor-image > a {
    height: 100%;
}

selector .elementor-widget-container img {
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
}

CSS personalizado para varias imágenes a través de una clase

La clase .img-fhe asegura que la imagen se ajuste correctamente a un espacio de altura completa y mantenga una proporción adecuada.

.img-fhe, 
.img-fhe .elementor-widget-container, 
.img-fhe .elementor-image, 
.img-fhe .elementor-image > a {
    height: 100%;
}

.img-fhe .elementor-widget-container img {
  object-fit: cover;
  object-position: 50% 50%;
  height: 100%;
}