Как связать изображения с пограничным изображением?

Question

Я использую Jssor Slider в сценарии «Различные размеры изображений слайдера». Я хочу добавить к каждому изображению изображение границы (деревянная рамка для картин).
все изображения принимают правильную ширину & height (включая размер рамки + размер изображения), но ни один из контейнеров Divs не принимает правильные размеры, и поэтому снизу изображения всегда будет усечено ..!

Как я могу добавить скрытую высоту для контейнера дивов?

<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; 
}