给出响应式背景图案图像

Question

我想在网站的左侧制作一个图案图像，该图像的高度将分别与右侧 div 的高度对应，以进行响应。

如果我在 side-pattern 类中没有给出高度或将高度放在 auto 中，则不会显示背景图像。我知道给出高度并不会使其反应灵敏。我试过给max-height 然后它也不显示图像。还尝试将position:absolute 赋予side-pattern div，它只是从左到右交换div，另一个问题是，它无助于显示图案图像。 pattern.png 的高度和宽度分别为 75px 和 75px。

我用过的html和css是

 <div class="sj-main-container">
     <div class="col-lg-2 side-pattern margin-none">

     </div>
     <div class="col-lg-10 margin-none">
        <div class="sj-main-content">

         </div>
      </div>
 </div>

我已经使用引导类来提供一个专栏。
CSS：

 .side-pattern {
background: url('img/pattern.png');
background-repeat: repeat;
height: 2082px;
 }

.sj-main-content {
 position: relative;
display: block;
overflow: visible;
}

Answer 1

好的，所以，据我所知，CSS 自己无法做到这一点，但是，你可以用这样的一些 js 做到这一点：

HTML：

     </div>
     <div class="col-sm-10 col-md-10 col-lg-10 margin-none">
        <div class="sj-main-content">
            <p>
              Bacon ipsum dolor amet turducken jowl tenderloin sausage pork belly jerky ham pork chop short ribs ground round salami brisket pork loin chuck. Hamburger ham tenderloin, frankfurter ground round landjaeger beef ribs. Meatball turkey tail landjaeger ribeye brisket. Meatball cow filet mignon picanha pork belly ribeye ball tip alcatra ground round pork chop boudin rump spare ribs ham.
            </p>
         </div>
      </div>
 </div>

CSS：

 .side-pattern {
background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/weather.png");
background-repeat: repeat;
position:relative;
height:0px;
 }

.sj-main-content {
 position: relative;
display: block;
overflow: visible;
}

JQuery:

$(document).ready(function(){
    checkMediaSize();
    $(window).resize(checkMediaSize);
})

function checkMediaSize() {
  var height = $(".sj-main-content").height();
  $(".side-pattern").css('height', height);
};

here 是一个工作示例：