我是這個CSS的新手..我的第一個滑塊里有2張圖片。實際目標是想在滑塊中顯示完整的圖像，但不幸的是，我無法使圖像完全適合滑塊，因為圖像寬度比滑塊寬度大..

以下是該滑塊的css代碼:

.ei-slider{
    position: relative;
    width: 100%;
    max-width: 960px;
    height: 338px;
    margin: 0 auto;
    background: #fdfdfd url('../images/bg/elastic-slider-bg.png') repeat-x top left;
}
.ei-slider-loading{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:999;
    background: #161616;
    color: #fff;
    text-align: center;
    line-height: 400px;
}
.ei-slider-large{
    height: 100%;
    width: 100%;
    position:relative;
    overflow: hidden;
    list-style:none;
    margin:0;
}
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.ei-slider-large li img{
    width: 100%;
}

你能告訴我如何將完整的圖片完美的放入滑塊嗎？

你可以用這個:

<img src="yourimg" height="338px" width="960px">

或者用css實現它

您使用的圖像一開始就沒有正確的比例。如果你有兩張比例相同的圖片，效果會更好。嘗試用正確的比例創建新的圖像，并從那里開始！

實際上你的滑塊圖像大小是600像素* 148像素，現在它根據滑塊寬度拉伸，所以質量很差....

您使用的是非常小尺寸的圖像....

請按照1100像素* 400像素制作你的圖像，如果你想按照這個尺寸制作你的圖像的話....

我你需要設置寬度和位置屬性，這里是代碼

.ei-slider-large {
height: 100%;
left: -70px;
list-style: none outside none;
margin: 0;
overflow: hidden;
position: relative;
width: 1100px;
}

圖像內聯樣式應該是

height: 400px;
margin-top: 0;
width: 1100px;

希望對你有幫助。

ps:slider表示主類，item表示子類，img表示圖像標簽