Question

有人可以帮忙吗？

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

Answer 1

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

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

我认为你只需删除评论/* The image to use或至少用结尾* / tag

关闭它

[或者]您可以使用background-size: cover;代码，但我还没有看到它很多次使用。适用于JSFiddle代码：）

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

2 个答案: