गतिशील छवि ऊंचाई के साथ jQuery मिलान div ऊंचाई

Question

मेरे पास एक छवि है जिसमें चौड़ाई 100% और 1024px की न्यूनतम चौड़ाई है। मैं छवि पर अपना 'छाया' div रखना चाहता हूं, और खिड़की के आकार में बदलाव के रूप में इसकी ऊंचाई से मेल खाता हूं, जिससे छवि का आकार खिड़की चौड़ाई में आनुपातिक रूप से बदल जाता है। मेरा वर्तमान कोड कुछ भी नहीं करता है ...

टेम्पलेट यहां http://jordan.rave5.com/tmp/ है, आप देखेंगे कि बैकग्राउड-ओवरले और पृष्ठभूमि-ग्रेडियेंट divs दस्तावेज़ का 100% विस्तार नहीं करते हैं। यह एक और समस्या है। जबरदस्त हंसी। मैं उन्हें बीजी 100% चौड़ाई और ऊंचाई होने की कोशिश कर रहा हूं।

jQuery:

  $('.header-img').css('height', function(imgheight) { 
       $('.image-grad').css({'height': + imgheight}); 
      }); 

सीएसएस:

  .image-grad { 
       position: absolute; 
       z-index: 600; 
       transition: width 2s; 
       -webkit-transition: width 2s; 
       width: 100%; 
       min-height: 174px; 
       max-height: 608px; 
       background-image: url(images/header-img.png); 
       background-repeat: repeat-x; 
       background-position: bottom; 
       top: 0; 
       left: 0; 
      } 

      .header-img { 
       position: relative; 
       z-index: 500; 
       width: 100%; 
       min-width: 1024px; 
       opacity: 0.0; 
      } 

HTML:

    <img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" /> 
        <div class="image-grad"></div> 

मैं ऐसा कर सकते हैं कैसे?

Answer 1

आप div का उपयोग कर .height

आप निम्नलिखित की तरह कुछ कर सकते हैं की ऊंचाई निर्धारित करने की आवश्यकता:

http://jsfiddle.net/Q4DRp/

var imageGrad = $('.image-grad'), 
    image = $('.header-img'); 

function resizeDiv() { 
    imageGrad.height(image.height()); 
    imageGrad.width(image.width()); 
} 

resizeDiv(); 

$(window).resize(function() { resizeDiv(); }); 

Answer 2

इसकी सहायता से आप अपने छाया छवि का आकार:

समाधान (नहीं परीक्षण किया)

$('.image-grad').css('height', $('.header-img').attr('height')); 

अपनी छवि की ऊंचाई पाने के लिए, का उपयोग .attr ('ऊंचाई')। फिर div की ऊंचाई सेट करने के लिए, .css ('height', '999') का उपयोग करें।