我的母版页上的CSS:我只想添加图片上的包装

时间:2011-09-21 01:40:54

标签: css

我已经在我的css上创建了一个包,以便我可以在我的母版页上调用它。我的问题是,当我在包装上添加图片时,图片很大,它被裁剪。你可以告诉我包装它的代码吗?这样我就可以在jCarousel上使用它了吗?

#featured .sliderImages{
position:absolute;
left:30px;
text-align:center;
width:380px;
height:202px;
top:30px;
     }
     ul.slider-img-list{
width:380px;
margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 
     1;       
     top: 1200px;
     }
    ul.slider-img-list li{
    overflow: hidden; float: left; width: 380px; height: 202px; vertical-align:bottom;
    }

      a.package1{
width:270px;
height:180px;
display:block;
background:url(images/slideleft-1.png) top left no-repeat;
margin:0 auto;
     }
     a.package2{
width:270px;
height:180px;
display:block;
background:url(images/slideleft-2.png) top left no-repeat;
margin:0 auto;
     }
     a.package3{
width:270px;
height:180px;
display:block;
background:url(images/slideleft-3.png) top left no-repeat;
margin:0 auto;
     }
      a.package4{
width:270px;
height:180px;
display:block;
background:url(images/slideleft-4.png) top left no-repeat;
margin:0 auto;
     }
     a.package5{
width:270px;
height:180px;
display:block;
background:url(images/slideleft-5.png) top left no-repeat;
margin:0 auto;
     }
     .sliderImages span, .arrows span{
display:none;
     }

1 个答案:

答案 0 :(得分:2)

你的问题很难理解。但是我觉得你说旋转木马中的图像太大了?也许试试: ul.slider-img-list li img{width:100%;}

你也可以像这样整理那个CSS:

#featured .sliderImages {
    position:absolute;
    left:30px;
    text-align:center;
    width:380px;
    height:202px;
    top:30px;
}
ul.slider-img-list {
    width:380px;
    margin: 0pt;
    padding: 0pt;
    position: relative;
    list-style-type: none;
    z-index:1;
    top: 1200px;
}
ul.slider-img-list li {
    overflow: hidden;
    float: left;
    width: 380px;
    height: 202px;
    vertical-align:bottom;
}

ul.slider-img-list li img{width:100%;}
ul.slider-img-list li a {
    width:270px;
    height:180px;
    display:block;
    margin:0 auto;
}
a.package1 {background:url(images/slideleft-1.png) top left no-repeat;}
a.package2 {background:url(images/slideleft-2.png) top left no-repeat;}
a.package3 {background:url(images/slideleft-3.png) top left no-repeat;}
a.package4 {background:url(images/slideleft-4.png) top left no-repeat;}
a.package5 {background:url(images/slideleft-5.png) top left no-repeat;}

.sliderImages span, .arrows span {display:none;}