Галерея изображений для изменения размера с окном браузера

Question

Я пытаюсь настроить сайт WordPress. Я использую этот плагин галереи изображений под названием Foogallery. Мне действительно нравятся все его функции, однако я бы хотел, чтобы размер галереи изменялся так же, как я обнаружил, чтобы сделать с одним изображением, подобным этому:

https://jsfiddle.net/c4qua6hf/

Я попытался применить тот же метод от скрипки к галерее, но безуспешно. Я попытался установить высоту на auto, а max-width и max-height равны 100%.

Может ли быть так, что где-то во всех css имеется foogallery, каким-то образом она блокирует мой код изменения размера? или это неправильный способ установить высоту на auto, а max-width и max-height равны 100%, когда дело доходит до галереи?

HTML выглядит так из примера, где я использование камбуза для выравнивания изображений в центре страницы:

<div class="foogallery foogallery-container foogallery-default foogallery-lightbox-none fg-gutter-15 fg-center fg-default fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-custom fg-caption-hover fg-hover-fade fg-hover-zoom" id="foogallery-gallery-315" data-foogallery="{&quot;item&quot;:{&quot;showCaptionTitle&quot;:true,&quot;showCaptionDescription&quot;:true},&quot;lazy&quot;:true,&quot;src&quot;:&quot;data-src-fg&quot;,&quot;srcset&quot;:&quot;data-srcset-fg&quot;}" data-fg-common-fields="1">
    <div class="fg-item fg-type-image fg-loaded">
        <figure class="fg-item-inner"><a href="http://localhost/wp-content/uploads/2020/04/HANGTAG_01.png" data-attachment-id="324" class="fg-thumb" data-type="image"><span class="fg-image-wrap"><img width="452" height="678" data-src-fg="http://localhost/wp-content/uploads/2020/04/HANGTAG_01.png" class="fg-image" src="http://localhost/wp-content/uploads/2020/04/HANGTAG_01.png" style=""></span><span class="fg-image-overlay"></span></a>
            <figcaption class="fg-caption">
                <div class="fg-caption-inner"></div>
            </figcaption>
        </figure>
        <div class="fg-loader"></div>
    </div>
    <div class="fg-item fg-type-image fg-loaded">
        <figure class="fg-item-inner"><a href="http://localhost/wp-content/uploads/2020/04/HANGTAG_01@2x.png" data-attachment-id="325" class="fg-thumb" data-type="image"><span class="fg-image-wrap"><img width="452" height="678" data-src-fg="http://localhost/wp-content/uploads/cache/2020/04/HANGTAG_01@2x/36442598.png" class="fg-image" src="http://localhost/wp-content/uploads/cache/2020/04/HANGTAG_01@2x/36442598.png" style=""></span><span class="fg-image-overlay"></span></a>
            <figcaption class="fg-caption">
                <div class="fg-caption-inner"></div>
            </figcaption>
        </figure>
        <div class="fg-loader"></div>
    </div>
</div>

CSS:

.fg-default.fg-gutter-15 {
    padding-left: 0px;
    margin-bottom: 110px;
}

.fg-default.fg-center {
    text-align: center;
}

.foogallery {
    display: block;
    z-index: 1;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    position: relative;
    line-height: 0;
    font-size: 0;
    width: 100%;
    max-width: 100%;
}

.foogallery,
.foogallery * {
    box-sizing: border-box;
}

.foogallery .fg-loaded .fg-image {
    z-index: 7;
}

.foogallery .fg-image {}

.fg-default .fg-image {
    vertical-align: top;
}

.fg-default .fg-image {
    border-radius: 0;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.foogallery .fg-image {
    display: block;
    position: relative;
    border: none;
    outline: 0;
    text-decoration: none;
    z-index: 5;
    max-width: none;
    height: auto;
    margin: 0;
}

.foogallery.fg-caption-hover .fg-caption .fg-caption-inner {
    width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}