Question

亲爱的stackoverflow用户，

我有一个包含图像的div（由wordpress中的php生成）。根据父母div大小，此图像将是100％宽度和自动高度。

我想应用一个覆盖此图像顶部和底部的边框图像。这可以通过box-sizing来实现：border-box。所以我做到了。

但由于某种原因，边框不会覆盖图像，图像的高度会减小，或者父母会增加其高度。

我已经坚持了很久。无论如何这只能用css完成吗？

HTML

<div class="box1">
<div class="box2">
    <img src="http://s29.postimg.org/oj8fdc5nb/example_image.png"/>
</div>
</div>

CSS

.box1{
position:relative;
width:400px;
height:auto;
border:1px solid grey;}

.box2{
width:100%;
height:auto;}

.box2 img{
width:100%;
height:auto;
border-image:url(http://s30.postimg.org/atduh061p/border_banner_3.png) 12 12 12 12 repeat;
-webkit-border-image:url("http://s30.postimg.org/atduh061p/border_banner_3.png") 12 12 12 12 repeat;
-moz-border-image:url("http://s30.postimg.org/atduh061p/border_banner_3.png") 12 12 12 12 repeat;   
border-width: 12px 0px 12px 0px;
box-sizing:border-box;
-webkit-box-sizing:border-box;}

Answer 1

我发现：之前和之后对这种努力有用：

.box1:before,
.box1:after
{
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    height: 12px;
    width: 100%;
    background-color: yellow;
}
.box1:after
{
    bottom: 0;
    background-color: green;
}

在JSFiddle

中查看此操作

如何在整个框大小的图像上应用边框图像，根据父母的大小动态改变图像的大小

1 个答案: