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

Question

亲爱的 stackoverflow 用户，

我有一个包含图像的 div(由 wordpress 中的 php 生成)。此图像将根据父 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 查看它的运行情况