Cropping image as a percentage with CSS

Question

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.

Don't be shy, show us your code. – daveyfaherty Oct 13 '11 at 11:14 — daveyfaherty, Oct 13 '11 at 11:14

score 3 · Answer 1 · answered Oct 13 '11 at 11:13

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%;
    }

score 1 · Accepted Answer · answered Oct 14 '11 at 13:39

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!

Cropping image as a percentage with CSS

2 Answers2