html - 如何在根据父级大小动态更改其大小的图像上应用边框图像 troughout box-sizing

Question

亲爱的 stackoverflow 用户，

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

我想应用一个覆盖该图像顶部和底部的边框图像。这可以通过 box-sizing:border-box 来完成。所以我做了。

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

我被困在这个问题上很久了。无论如何，这只能用css来完成吗？

jsfiddle：http: //jsfiddle.net/SE3Na/

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

我发现 :before 和 :after 对于这种努力很有用：

.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上查看它的实际应用