响应Primefaces galllery

Question

我试图制作一个Primefaces ＆lt; p：gallery＆gt; 响应，以便中的图片保持其宽高比（说清楚：我希望与宽度为100％的简单IMG具有相同的行为，它会增加/自动降低其高度以保持其纵横比。）

使用图库时呈现的结果HTML元素如下：

<div class"pictures_gallery">
    <ul class"ui-galleria-panel-wrapper">
        <li class"ui-galleria-panel">
            <img class"a_picture"/>
        </li>
        /*one extra "li" for each picture*/
    </ul>
</div>

CSS我现在正在申请：

.pictures_gallery{
        width: 100% !important;
        height: auto !important;
}

.ui-galleria-panel-wrapper{
        width: 100% !important;
        height: auto !important
}

.ui-galleria-panel{
        width: 100% !important;
        height: auto !important;
}

.a_picture{
        width: 100% !important;
        height: auto !important;
}

我的问题是图库不在具有已定义高度的容器内，并且生成的图库高度为零。 我怎样才能达到预期的效果？有可能吗？

提前多多感谢。

PS：不要因为！important 而责怪我，它只是用来简化......