Resize div mit jquery javascript und dehnen Hintergrundbild

Question

Ich habe eine Box Div und es hat Header und Körper. Enthält ein div mit einem Hintergrundbild.

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>

mein .box ist eine veränderbare Feld, so wird es mit der Maus

Aber Bild strecken nicht die Box Größe ändern werden. Ich möchte dies mit CSS-Eigenschaften tun. Ich möchte keine Größe mit Javascript einstellen. Ist das möglich?

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

Dieser Code wird Ihr Bild strecken.

Answer 2

Sie müssen Höhe für Ihre .box-header hinzufügen, und danke, dass Sie Ihre .box-body Höhe berechnen können. Jetzt funktioniert Ihre height:100%; in .window ordnungsgemäß. diese

Check:

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>

Wenn Sie eine dynamische Höhe des Kopf haben wollen, können Sie dynamisch es in Javascript berechnen.

Answer 3

Ändern Sie nicht .box height, wenn das Hintergrundbild verkleinert werden soll, ändern Sie die .window height!

https://jsfiddle.net/t87tjmmk/

setInterval(function(){ 

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

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

Answer 4

ich erreicht, was Sie hier wollen. 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%; 

    }