2

我是这个 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%;
}

您能否请有人告诉如何将完整图像完美地放入该滑块中？

4

5 回答 5

0

您使用的图像一开始就没有正确的比例。如果您有 2 张具有相同比例的图像，效果会更好。尝试创建具有正确比例的新图像，然后从那里开始！

于 2012-11-09T09:36:16.063 回答
0

在实际中，您的滑块图像大小是600px*148px现在它根据滑块宽度进行拉伸，因此质量很差......

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

请根据1100px*400px您是否将根据此尺寸制作图像而不是滑块完美地制作图像....

于 2012-11-09T09:39:31.177 回答
0

我需要设置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;

希望对你有帮助。

于 2012-11-09T09:40:54.523 回答
0

你可以使用这个：

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

或者用 css 实现这个

于 2012-11-09T09:33:54.843 回答
0 
.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指图片标签

于 2018-08-22T06:39:25.600 回答