如何用border-image绑定图像？

Question

我在＆＃34;不同尺寸的图像滑块＆＃34;中使用了Jssor Slider。场景。 我想为每张图片添加一个边框图像（用于绘画的木框） 所有图像都采用正确的宽度和宽度。高度（包括边框大小+图像大小），但没有容器Div采用正确的尺寸，因此图像的底部将始终被截断..！

如何将隐藏高度添加到容器Div？

<style>
    #slider {
        text-align: center;
        margin: 0 auto;
        width: 100%;
        max-width: 980px;
        padding: 0;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #sld {
        padding-top: 10px;
        padding-bottom: 10px;
    }

        #sld img {
            border: 20px solid #f4be52;
            border-image-source: url('http://codeitdown.com/samples/wooden_frame.jpg');
            border-image-slice: 50 65;
        }
</style>

<section id="slider">
    <div id="sld" style="position: relative; top: 0; left: 0; width: 600px; height: 500px; margin: 0 auto; display: block; overflow: hidden;">
        <!-- Loading Screen -->
        <div data-u="loading" style="position: absolute; top: 0; left: 0;">
            <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; background-color: #000; top: 0; left: 0; width: 100%; height: 100%;">
            </div>
            <div style="position: absolute; display: block; background: url(/images/loading2.gif) no-repeat center center; top: 0; left: 0; width: 100%; height: 100%;">
            </div>
        </div>
        <!-- Slides Container -->
        <div data-u="slides" id="divSlides" style="cursor: move; position: absolute; overflow: hidden; width: 600px; height: 500px; left: 0; top: 0;">
            <div>
                <a u="image" href="#">
                    <img src="../paint/03.jpg" /></a>
            </div>
            <div>
                <a u="image" href="#">
                    <img src="../paint/01.jpg" /></a>
            </div>
            <div>
                <a u="image" href="#">
                    <img src="../paint/07.jpg" /></a>
            </div>
        </div>
    </div>
</section>

<script type="text/javascript">
        (function ($) {
            var options = { $AutoPlay: false, $FillMode: 1 };
            var sld1 = new $JssorSlider$('sld', options);
            function ScaleSlider() {
                var parentWidth = sld1.$Elmt.parentNode.clientWidth;
                if (parentWidth)
                    sld1.$ScaleWidth(Math.min(parentWidth, 600));
                else
                    window.setTimeout(ScaleSlider, 30);
            }
            ScaleSlider();

            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
        })(jQuery);
</script>

Answer 1

请删除以下内容

#sld {
    padding-top: 10px;
    padding-bottom: 10px;
}

并添加框大小，如下所示

#sld img {
    border: 20px solid #f4be52;
    border-image-source: url('http://codeitdown.com/samples/wooden_frame.jpg');
    border-image-slice: 50 65;
    box-sizing: border-box;
}