css - Primefaces imageSwitch 宽度和高度样式

Question

我在调整 primefaces imageSwitch 获取的图像大小时遇到​​问题。在随附的屏幕截图中，您可以看到我如何为 p:imageSwitch 提供了一个小尺寸的红色边框，但加载图像在外面。

.xhtml p:imageSwitch:

<p:imageSwitch styleClass="iSwitch" effect="fade" rendered="#{formBean.formBean1 eq null and formBean.formBean2 eq null}">              
    <ui:repeat value="#{imageSwitchBean.images}" var="image">  
        <p:graphicImage value="/img/#{image}" />  
    </ui:repeat>  
</p:imageSwitch>  

CSS 样式:

.iSwitch{
    border: solid red;
    width: 300px !important;
    height:150px !important;
}

java 托管 Bean:

@ManagedBean
public class ImageSwitchBean {

private List<String> images;

public ImageSwitchBean() {
    images = new ArrayList<String>();
    images.add("img1.jpg");
    images.add("img2.jpg");
    images.add("img3.jpg");
    images.add("img4.jpg");
    images.add("img5.jpg");
    images.add("img6.jpg");
}

public List<String> getImages() {
    return images;
}

}

Answer 1

做类似的事情:

.switcher {
    width: 600px !important;
    height: 380px !important;
}

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