使用CSS缩放图像,同时保留圆角

xzv2uavs  于 2023-01-27  发布在  其他
关注(0)|答案(3)|浏览(166)

有人能帮忙吗?
我有一个图像,我在我的网页上显示。图像有一些圆角,我已经取得了一些CSS技巧。但现在的问题是自动缩放图像。
<img>缩放图像是没有问题的,但是在圆角代码中使用它就成了一个问题,因为这是用background-image实现的。
有人知道我怎么把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中完成吗?

ycl3bljg

ycl3bljg1#

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

p4tfgftt2#

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

pobjuy32

pobjuy323#

使用background-image: url("#")缩放图像时,我没有发现任何问题。http://jsfiddle.net/sE3RG/
我认为您只需要删除注解/* The image to use,或者至少用结束标记 */结束它
[OR]您可以使用background-size: cover;代码,但我还没有看到它工作很多次。工作在JSFiddle代码虽然:)

相关问题