如何将完整的图像完美地放入滑块? [英] how to fit full images perfectly into the slider?

问题描述

我是此CSS的新手..我的第一个滑块内有2张图像.实际目标是想将其完整图像显示到该滑块中，但是不幸的是，由于图像宽度小于滑块宽度，因此无法使图像完全适合滑块.

Iam new to this CSS.. I have 2 images inside my 1st slider. actual aim thinking to display its full images into that slider, but unfortunately, iam unable to make the images fit into slider perfectly as images width are mroe than the slider width..

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

您能告诉别人如何将完整的图像完美地放入该滑块吗?

Could you please someone tell how to fit full images perfectly into that slider?

推荐答案

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

---

ps:slider refers main class, item refers sub class, img refers image tag

这篇关于如何将完整的图像完美地放入滑块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！