CODEWITHSUNDEEP
jquerycssslider
Jssonline
Jssonline

Reputation: 110

Image has to fit in div without losing proportions

I've made a simple slider, that works perfectly, but I can't get the image fit in the div without losing proportion. It must be quite simple but I can't get it right.

Can you help with it?

Here is the code

Many thanks in advance.

#featuredslider{
    margin: 0 auto;
    margin-bottom:80px;
    width:1080px;
    height: 350px;
    background-color:#FFFFFF;
    display:block;
    position:relative;
    overflow:hidden;
    top:85px;
}
#featuredslider img{
    position:absolute;
    width:100%; 
    height:auto;
    max-height:350px;
}

Upvotes: 0

Views: 177

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157284

Instead of defining width: 100%; make it max-width: 100%;

Demo

Same way, you can use max-height property as well, but if you want that your img should stretch 100% wide, than your img will stretch.

Upvotes: 2

Related Questions