Css Primefaces图像切换宽度和高度样式

我在调整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>  

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

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

}

java托管Bean:

<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>  

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

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

}

@ManagedBean
公共类ImageSwitchBean{
私有列表图像；
公共ImageSwitchBean（）{
images=newarraylist（）；
添加（“img1.jpg”）；
添加（“img2.jpg”）；
图片。添加（“img3.jpg”）；
添加（“img4.jpg”）；
添加（“img5.jpg”）；
添加（“img6.jpg”）；
}
公共列表getImages（）{
返回图像；
}
}

执行以下操作：

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

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