给出响应的背景图案图像

Question

我想在一个站点的左侧制作一个图案图像，该图像的高度分别对应于右侧div的高度以便响应。

如果我在课堂side-pattern中没有给出高度或将高度设置为自动，那么背景图像就不会显示。我知道给予身高并不能使其反应灵敏。我试过给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>

我使用bootstrap类来提供一个列 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可以通过它自己做到这一点，但是，你可以用这样的一些j来做到这一点：

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是一个有效的例子：