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 Managed 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;
}