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

【问题标题】：Scale an image with CSS while keeping rounded corners使用 CSS 缩放图像，同时保持圆角
【发布时间】：2012-07-26 04:18:49
【问题描述】：

有人可以帮忙吗？

我在我的页面上显示了一张图片。图像有一些圆角，我用一些 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 中完成吗？

【问题讨论】：

标签： html css background-image image

【解决方案1】：

使用可以使用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%;

【讨论】：

【解决方案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

【讨论】：

有一个空的 div 总比一个沉闷的要好 !

【解决方案3】：

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

我认为您只需要删除评论 /* The image to use 或至少用结尾 */ 标签关闭它

[OR] 你可以使用background-size: cover; 代码，但我没有看到它工作过很多次。虽然适用于 JSFiddle 代码:)

【讨论】：

糟糕，当我在此处发布代码示例时，没有添加评论。它实际上不是我的代码的一部分，但似乎 background-size: cover;将为我工作。谢谢