使用jQuery JavaScript调整div大小并拉伸背景图像

Question

I have a box div and it has header and body. Contains a div that has a background image.

 setInterval(function(){ var height = $(".box").height(); $(".box").height(height+2) }, 1000); 

 .box{ height: 100%; background-color: #22ff2f; width:350px; } .box-header{position:inherit; background-color:#9ed;width:100%;} .box-body{} .window{ background-position: center; background-size: cover; background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg'); min-height:190px; width:100%; height:100%; position:relative; text-align:center; overflow:hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="box"> <div class="box-header"> header </div> <div class="box-body"> <div class="window"> </div> </div> </div> 

my .box is a resizable box, so it will be resize with mouse

But image does not stretch the box. I want to do this with CSS properties. I do not want to set size with javascript. Is this possible?

WORKİNG DEMO

Answer 1

Try this,

<div class="box">
  <div class="box-header">
    header
  </div>
  <div class="box-body">
    <div class="window">

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

JS CODE :

setInterval(function() {
  var height = $(".window").height();
  $(".window").css({
    'height': height + 100
  });

}, 1000);

This code will stretch your image.

Answer 2

You need to add height for your .box-header , and thanks it you will be can calc your .box-body height. Now your height:100%; in .window will be work properly.

Check this:

 setInterval(function(){ var height = $(".box").height(); $(".box").height(height+2) }, 1000); 

 .box{ height: 100%; background-color: #22ff2f; width:350px; } .box-header{ position:inherit; background-color:#9ed; width:100%; height: 20px; } .box-body{ height: calc(100% - 20px); } .window{ background-position: center; background-size: cover; background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg'); min-height:190px; width:100%; height:100%; position:relative; text-align:center; overflow:hidden; } 

 <div class="box"> <div class="box-header"> header </div> <div class="box-body"> <div class="window"> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

If you want to have a dynamic height of the header, you can dynamically calculate it in javascript.

Answer 3

Don't change .box height if you want the background image to resize, change .window height!

https://jsfiddle.net/t87tjmmk/

setInterval(function(){

    var height = $(".box").height();

    $(".window").height(height+2); }, 1000);

Answer 4

I achieved what you want here. See Demo here

HTML

<div class="box">
    <div class="box-header">
      header
    </div>
  <div class="box-body">
      <div id='w' class="window">
      </div>
  </div>
</div>

JavaScript

var w=document.getElementById('w');
    var x=192;

    setInterval(function(){

        var height = $(".box").height();
        $(".box").height(height+2);
    w.style.minHeight=x+"px";
    x+=2;    
    },90);

CSS

.box{    
        height: 100%;
        background-color: #22ff2f;
        width:350px;
      }
    .box-header{position:inherit; background-color:#9ed;width:100%;}
    .box-body{}

    .window{
        background-position: center;   
        background-image: url('http://dailybestlike.com/wp-content/uploads/2015/07/simple-ideas-products-11.jpg');
        min-height:190px;
         width:100%;
      height:100%;
        position:relative;
        text-align:center;
        overflow:hidden;
        background-repeat:no-repeat;
        background-size: 100% 100%;

    }