Question

我很喜欢这个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%;
}

有人可以告诉别人如何将完整的图像完美地融入滑块吗？

Answer 1

您可以使用：

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

或者用css实现这个

Answer 2

您使用的图像开头时的比例不正确。如果您有2个具有相同比例的图像，则效果会更好。尝试以正确的比例创建新图像，并从那里开始！

Answer 3

在实际中，您的滑块图像大小为600px*148px，现在根据滑块宽度进行拉伸，以便质量不佳......

您正在使用非常小尺寸的图像......

请根据1100px*400px制作图像，如果您根据此尺寸制作图像，则滑块可以完美地工作....

Answer 4

您需要设置width和positon属性，此处为代码

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

希望对你有所帮助。

Answer 5

.slider
{
   height:450px;
   width:100%;
   overflow:scroll;//if you want fully display the imgaes
   overflow:hidden;//if your want omit the rest of images

}
.item img
{
width:100%;
height:auto;
display:block;
}

ps：slider引用主类，item引用子类，img引用图像标签

如何将完整的图像完美地融入滑块？

5 个答案: