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

xzv2uavs 于 2023-01-27 发布在其他

关注(0)|答案(3)|浏览(167)

有人能帮忙吗？
我有一个图像，我在我的网页上显示。图像有一些圆角，我已经取得了一些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中完成吗？

css

来源：https://stackoverflow.com/questions/11688612/scale-an-image-with-css-while-keeping-rounded-corners

3条答案

按热度按时间

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%;

赞(0）回复(0）举报 2023-01-27

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

赞(0）回复(0）举报 2023-01-27

pobjuy323#

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

赞(0）回复(0）举报 2023-01-27

我来回答

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

3条答案

相关问题

热门标签

最新问答