有人能帮忙吗?
我有一个图像,我在我的网页上显示。图像有一些圆角,我已经取得了一些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"> </div>
正如你所看到的,我没有在任何地方使用<img>
元素,所以我想知道这能在CSS中完成吗?
3条答案
按热度按时间ycl3bljg1#
用户可以使用css3 background size property缩放
background-size: 100% 100%;
p4tfgftt2#
使用
background-size: cover;
:Working Demo
pobjuy323#
使用
background-image: url("#")
缩放图像时,我没有发现任何问题。http://jsfiddle.net/sE3RG/我认为您只需要删除注解
/* The image to use
,或者至少用结束标记 */结束它[OR]您可以使用
background-size: cover;
代码,但我还没有看到它工作很多次。工作在JSFiddle代码虽然:)