CODEWITHSUNDEEP
csscrop
bravokiloecho
bravokiloecho

Reputation: 1473

Cropping image as a percentage with CSS

I want to resize an image so that it takes up 100% width of the page and 40% of its height but without distorting the image's natural ratios.

I came across this tutorial but I can't seem to get it to work with percentage values rather than just pixel or em values.

Any ideas how this might be done? Much thanks.

Upvotes: 3

Views: 4000

Answers (2)

bravokiloecho
bravokiloecho

Reputation: 1473

This seemed to work better:

div{
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 40%;
 background:url(images/background.jpg) no-repeat;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
 background-size:100% auto;
}

But thanks so much for guiding me to the right place!

Upvotes: 1

sandeep
sandeep

Reputation: 92833

you can use css3 background-size property for this:

div{
 background:url(image.jpg) no-repeat;
 -moz-background-size:100% 40%;
 -webkit-background-size:100% 40%;
 background-size:100% 40%;
}

& if you do not want to distort the image then write like this:

div{
     background:url(image.jpg) repeat-x;
     -moz-background-size:auto 40%;
     -webkit-background-size:auto 40%;
     background-size:auto 40%;
    }

Upvotes: 3

Related Questions