如何使用刷新图形边框创建响应图像？

Question

我正在与一个客户合作，他的网站的照片具有图形化的“草图”边框效果，如下所示：

通常这些边框只包含在图像文件本身中，但在这种情况下，这不会起作用。

我们正致力于创建一个动态从Twitter和Instagram中提取图像的图像轮播，我们希望模仿边框效果。该网站是响应式的（使用Bootstrap 2.3.2），因此边框效果需要随图像缩放而缩放。

我最初的想法是使用边框作为背景并覆盖图像like in this JSFiddle。

HTML：

<div class="outer">
    <div class="inner">
        <img src="img.png" />
    </div><!-- /inner -->
</div><!-- /outer -->

CSS：

.inner {
    width: 80%;
    height: 80%;
    display: block;
    position: relative;
    padding: 10%;
}

.inner:after {
    background: url(http://i.imgur.com/JdA1v7i.png) no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    content:"";
}

.inner img {
    max-width: 100%;
}

但是，他们希望边框与图像完全齐平，使用百分比不会发生这种情况，因为它们不能均匀分割。

有关如何创建此效果，使其响应以及保持边框与内部图像齐平的任何建议吗？