html - 给出响应式背景图案图像

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>

我已经使用 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 本身无法做到这一点，但是，您可以像这样使用一些 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是一个工作示例: