Как автоматически скрыть фиксированный размер снизу изображения для изображений разных размеров - PullRequest
1 голос
/ 03 июля 2019

Я создаю новую блог-галерею для клиента, используя elementor и wordpress. Изображения клиента для каждого соответствующего блога содержат водяной знак нижнего колонтитула для каждого изображения. Клиент желает скрыть водяной знак нижнего колонтитула в представлении галереи. Когда пользователь взаимодействует с изображениями (при нажатии), активируется лайтбокс, а затем отображается полное изображение, включая ранее скрытый нижний колонтитул. Высота всех изображений различается по размеру (см. Ниже), но экономия заключается в том, что нижний колонтитул и ширина остаются одинаковыми по всему размеру (см. Ниже).

Поскольку я создал отдельный пост в качестве шаблона в elementor, галерею можно отобразить через

  1. Опубликовать контент (elementor), который вытащил именно из WP
  2. Виджет галереи изображений (elementor), который можно динамически связать с вложенными файлами.

Я настроил оба элемента, упомянутых выше, и использовал следующую CSS:

    {
    position: absolute;
    clip: rect(0, 915px, 609px, 0);
    }

Это создает желаемый эффект только для определенных изображений, НО, выравнивание полностью отсутствует. Если я удаляю POSITION из css и активирую POSITION в виджете elementor, выравнивание исправляется ОДНАКО из всего, что было под ним, т.е. другой раздел теперь отображается непосредственно позади или поверх него, в зависимости от z-index.

Как можно автоматически скрыть водяной знак нижнего колонтитула для всех изображений в галерее с различными размерами?

Различные размеры изображения:

* footer = 80px
* w x h
    * 915x689px
    * 915x784px
    * 915x1453px
...