Question

您好，我是Primefaces的新手，我正在使用Primefaces 6.2创建MenuBar。该MenuBar只有一个带有自定义图标的MenuItem。图标的大小为400x150像素。问题在于Icon太大，因此MenuBar太大，因为它会根据Icon / Image进行自我调整。我想将图像/图标重新缩放为200x75像素。我可以通过Photoshop更改图标的大小，但这不是我想要的。如何在Primefaces的MenuBar / MenuItem中重新缩放自定义图标/图像并保持纵横比？

我在Stackoverflow和Primefaces论坛/文档中搜索了数小时，但找不到正确的答案。我找到了这个answer，但是我认为这是FontAwesome特有的。我试图覆盖 ui-menuItem 之类的Primefaces CSS类，但这没有用。我尝试了 width：auto！important height：100％和许多其他组合，但是它们都不适合我。当我在MenuItem外部使用 h：graphicImage 的div中使用宽度和高度时，它的工作原理与预期的一样。但是我无法在MenuBar中实现它。

我用它来更改Primefaces menuItem的大小。这很好。

.ui-icon {
height: 75px !important;
width: 200px !important;
}

使用上面的代码，我具有每个元素都想要的大小。这是我自定义的CSS类来加载图像

.my-icon {
background: url(resources/myLogo.png) no-repeat !important;
}

这是菜单栏

<h:form>
    <p:growl id="messages" />
    <p:menubar>
        <p:menuitem icon="my-icon"
            url="http://localhost:8080/MyApp/index.xhtml" />
    </p:menubar>
</h:form>

现在我有一个带有MenuItems的menuBar，其尺寸为200x75px，但是图像没有按比例缩小。其仍为400x150px，而下部和右侧部分缺失。这是一张照片。

here is how it looks like right now

重新缩放Primefaces MenuItem中的自定义图标

0 个答案: