Как применить границы troughout изображения коробчатого проклейки на изображение, которое динамически изменяет это размер в зависимости от размера родительского

Question

Уважаемые пользователи StackOverflow,

У меня есть DIV, который содержит изображение (сгенерированный PHP в WordPress). Это изображение будет 100% шириной и автоматической высотой в соответствии с размером div родителей.

Я хочу применить изображение границы, которое накладывает верх и низ этого изображения. Это можно сделать с помощью 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

Я считаю: до и: после того, чтобы быть полезным для такого рода деятельности:

.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