css 如何将完整图像完美地放入滑块？

wwtsj6pe 于 2023-02-06 发布在其他

关注(0)|答案(5)|浏览(156)

我是新的这个CSS..我有2个图像在我的第一个滑块。实际的目标是想显示其完整的图像到滑块，但不幸的是，我无法使图像完全适合滑块作为图像宽度比滑块宽度mroe ..

以下是该滑块的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%;
}

你能请人告诉如何适合完整的图像完美地进入该滑块？

css

来源：https://stackoverflow.com/questions/13305328/how-to-fit-full-images-perfectly-into-the-slider

5条答案

按热度按时间

bweufnob1#

您可以使用以下命令：

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

或者用css实现它

赞(0）回复(0）举报 2023-02-06

8fq7wneg2#

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

赞(0）回复(0）举报 2023-02-06

scyqe7ek3#

在实际中，您的滑块图像大小是600px*148px，现在它根据滑块宽度拉伸，因此质量很差...
您正在使用非常小的图像....
请使您的图像根据1100px*400px，如果您将使您的图像根据这个大小比滑块工作完美。

赞(0）回复(0）举报 2023-02-06

dhxwm5r44#

如果你需要设置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;

希望对你有帮助。

赞(0）回复(0）举报 2023-02-06

kmbjn2e35#

.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是指图像标签

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何将完整图像完美地放入滑块？

5条答案

相关问题

热门标签

最新问答