以CSS的百分比裁剪圖像

Question

我想調整圖像大小，使其佔用頁面的100％寬度和高度的40％，但不會扭曲圖像的自然比例。

我碰到了this tutorial，但我似乎無法讓它使用百分比值而不是像素或em值。

任何想法如何做到這一點？非常感謝。

Answer 1

這似乎更好地工作：

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

但是，非常感謝您指導我到正確的地方！

Answer 2

你可以使用CSS3這個background-size屬性：

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

&如果你不想扭曲圖像，然後像這樣寫：

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