html - 使用 CSS 缩放图像同时保持圆 Angular

Question

有人可以帮忙吗？

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

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

有谁知道如何将两者结合起来？

这是我在 CSS 中实现圆 Angular 的方法:

.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 property缩放 background-size: 100% 100%;

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