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

here is the css code of that slider:

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

Arthur
  • 21
  • 1
  • 1
  • 3

5 Answers5

0

You can use this:

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

OR implement this with css

Napsteur
  • 94
  • 6
  • This is what I found in my php file: \"".yiw_slide_get(\n"; ?> and iam not understanding where to remove that marigin-left , margin-top for the image tag... (in source its showing, but in image tag, these 2 attributes are not there...) – Arthur Nov 09 '12 at 10:05
0

You are using images that does not have the correct ratio to begin with. If you have 2 images that has the same proportion, it would work better. Try to create new images with correct proportions, and start from there!

phun-ky
  • 351
  • 3
  • 12
0

In Actual your slider images size is 600px*148px and now its stretching according to slider width so that the quality is bad....

You are using a very small size images....

please make your images according to 1100px*400px if you will make your images according to this size than slider work perfectly....

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
  • unfortunate;ly i do not have such size of images, so pls provide me a alternative solution.. – Arthur Nov 09 '12 at 10:13
0

iyou need to set width and positon property, here the code

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

And image inline styling should be

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

Hope is helpful to you.

Selvamani
  • 7,434
  • 4
  • 32
  • 43
  • HI, I just did what you said.. BUT i wanna see full image fit into that slider...still iam not getting it.. and i still dont understand: from where width, margin-left attributes assigned to this img tag: – Arthur Nov 09 '12 at 10:12
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 refers main class, item refers sub class, img refers image tag

Rajasekaran N
  • 9
  • 4