使用CSS縮放圖像，同時保持圓角

我有一個圖像顯示在我的頁面上。圖像有一些圓角，我用一些CSS技巧實現了。但現在的問題是自動縮放圖像。

使用<img>縮放圖像是沒有問題的，但將它用於圓角代碼我已經成爲一個問題，因爲這是通過背景圖像實現的。

有誰知道我可以如何結合2？

這是我如何實現圓角CSS：

.informationBarLeft { 
width: 24%; 
height: 160px; 
border: 1px solid #000000; 
float: left; 
margin-right: 1%; 
background-image: url('../Images/pumpkin-soup.jpg'); /*The image to use */ 
background-repeat: no-repeat; 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
border-radius: 15px;

}

和HTML是那麼簡單：

<div class="informationBarLeft">&nbsp;</div>

正如你看到的，我不使用<img>元素任何地方，所以林想知道這可以在CSS中完成？

來源

2012-07-27 heyred

使用可以使用CSS3 background size property規模background-size: 100% 100%;

-moz-background-size: 100% 100%;   
-o-background-size: 100% 100%;   
-webkit-background-size: 100% 100%;  
background-size: 100% 100%;

來源

2012-07-27 13:28:50 Dipak

使用background-size: cover;希望這將幫助你

.informationBarLeft { 
    width: 24%; 
    height: 160px; 
    border: 1px solid #000000; 
    float: left; 
    margin-right: 1%; 
    background-image: url('../Images/pumpkin-soup.jpg'); /*The image to use*/ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
}

Working Demo

來源

2012-07-27 13:27:43 SVS

最好有一個空的div，而不是枯燥的！ – 2012-07-27 13:47:45

我沒有發現任何問題，而使用縮放圖像background-image: url("#")。這裏檢查了這一點：http://jsfiddle.net/sE3RG/

我想你只需要刪除註釋/* The image to use或至少有一個結局* /標籤

[OR]你可以使用background-size: cover;代碼關閉它，但我沒有看到它工作很多次。雖然在JSFiddle代碼上工作:)

來源

2012-07-27 13:32:07

當我在此處發佈代碼示例時，不會添加該評論。它實際上並不是我的代碼的一部分，但似乎是背景大小：封面;將爲我工作。謝謝 – heyred 2012-07-27 13:41:50

使用CSS縮放圖像，同時保持圓角

回答

相關問題