使用CSS缩放图像，同时保持圆角

Question

有谁能帮帮忙吗？

我在我的页面上显示了一张图片。图像有一些圆角，这是我用一些CSS技巧实现的。但现在的问题是自动缩放图像。

使用<img>缩放图像没有问题，但在圆角代码中使用它就成了一个问题，因为这是通过背景图像实现的。

有人知道我怎么把这两个组合起来吗？

下面是我在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中实现吗？

Answer 1

使用可以使用css3 扩展background-size: 100% 100%;

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

Answer 2

使用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

Answer 3

在使用background-image: url("#")缩放图像时，我没有发现任何问题。在这里查看：http://jsfiddle.net/sE3RG/

我认为您只需要删除注释/* The image to use，或者至少以*/标记结尾

或者您也可以使用background-size: cover;代码，但我并没有多次看到它工作。但是可以在JSFiddle代码上运行:)