如何應用邊框圖像troughout，根據家長的大小

Question

尊敬的計算器用戶，

動態改變它的大小圖像上盒大小我有一個包含一個圖像（在WordPress由PHP生成）一個div。根據父母的div大小，此圖像將爲100％寬度和自動高度。

我想應用覆蓋此圖像頂部和底部的邊框圖像。這可以通過框尺寸來實現：邊框。所以我做了。

但由於某些原因，邊框不覆蓋圖像，並且圖像高度尺寸減小或父圖像高度尺寸增加。

我被困在這裏已經有好幾年了。無論如何，這隻能用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

我發現：前和：後成爲這種努力的有用：

.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