p:galleria 在底部没有褪色，就像 PrimeFaces 展示页面上的情况一样答案

【问题标题】：p:galleria is not faded at the bottom, as is the case on the PrimeFaces showcase pagep:galleria 在底部没有褪色，就像 PrimeFaces 展示页面上的情况一样
【发布时间】：2019-09-09 04:37:04
【问题描述】：

我在 WildFly 16、JSF 2.3 上使用 PrimeFaces 7.0。（我也尝试过使用 PrimeFaces 6.2，但没有任何改变）。

我使用p:galleria标签如下：

    <p:galleria value="#{exposeBean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="false">
    <p:graphicImage id="image" value="#{image}" alt="#{image}" title="#{image}"/>
</p:galleria>

上述功能按预期工作，但是选择的图片不会在底部褪色，画廊的其余图片显示在底部 - 请参见此处：

可能是什么原因，我该如何解决？

我最小的工作示例似乎与我使用的图像的大小有关（至少，它似乎是这样的。）：

https://github.com/alexmivonwien/pf.gall.git

在比较我的案例和 primeface Galleria 展示的案例中生成的 HTML 和 CSS 后，我发现了以下差异：

1.) 我自己生成的 HTML 和 CSS：

注意“ul”元素下的第一个“li”子元素

<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">

有 CSS 样式（这里没有 display:none）：

<li class="ui-galleria-panel" style="width: 500px; height: 313px;">

2.) primefaces 上的 HTML 和 CSS 展示：

注意“ul”元素下的第一个“li”元素

<ul class="ui-galleria-panel-wrapper" style="width: 500px; height: 313px;">

有css样式（这里有一个display:none）：

<li class="ui-galleria-panel" style="width: 500px; height: 313px; display: none;">

【问题讨论】：

寻找应用 css 的差异
这看起来像是故意的，因为在幻灯片中，活动的人获得了“ui-galleria-frame-active”的样式。
@Kukeltje 我发现了一个不同之处（请参阅我编辑的问题。）我该如何解决它，为什么会出现？谢谢！
@Melloware：我认为OP意味着大图像下方幻灯片的背景在展示柜中是白色的，并且它是他案例中图像的一部分。 “褪色”一词在这里具有误导性。但如果我错了，我不知道实际问题是什么。但如果我是对的，我无法从展示中看到如何获得 OP 的版本（css wise）
我只能通过在展示中给图像一个明确的高度 > 313px 来进行复制。所以它可能是由一些通用的 CSS 引起的。 OP 应该尝试创建一个minimal reproducible example（应该总是这样做）

标签： jsf primefaces

【解决方案1】：

在 PrimeFaces 展示中重现这一点的唯一方法是为图像指定明确的高度。例如。通过像img {height: 364px} 这样的浏览器开发工具添加css 规则可以实现这一点。这使得大图像无法完全显示缩略图中的内容，它在右侧被截断。这也可以在您的屏幕转储中看到。在缩略图中，右侧的水槽比在大图像中更明显。所以这是 100% 确定的，因为某些 css 会调整图像的大小或图像的错误方面与 ttge 尺寸相比，请放在p:galeria

但是，您问题的代码中看不到造成这种情况的实际技术原因。下一次，总是创建一个 [mcve]，通过越来越多地减少，直到您留下一小段（完整、可验证、可执行）代码来演示问题，或者 您找到了解决方案...

实际上，这个问题与纯 css html 相关，与 PrimeFaces 无关。

【讨论】：

感谢您的无价努力，@Kukeltje！我将尝试减少问题并在更小的代码中重现它（如果可能的话）。
首先使用浏览器开发工具检查图像的实际高度，如果 > 313px（画廊的默认值），应该很容易看出其他高度的来源。但是创建minimal reproducible example 的步骤是了解如何（以及为什么）始终这样做的好方法）
@Kukejltje：我添加了一个最小的工作示例并编辑了我的问题。你可以从这里下载：github.com/alexmivonwien/pf.gall.git
我通过在最小的工作示例中将 style="width:95%" 添加到
也许您的图像与展示中的图像具有不同的比例。然后调整广场的宽度和/或高度