jQuery eşleşme div yüksekliğiyle dinamik görüntü yüksekliği

Question

% 100 ve genişliği 1024 piksel olan bir görüntüm var. 'Gölge' divamı görüntü üzerinde tutmak ve aynı zamanda pencere boyutu değiştikçe aynı yüksekliğe uymak istiyorum; bu da görüntü boyutunun orantılı olarak pencere genişliğine değişmesine neden oluyor. Geçerli kodum hiçbir şey yapmadı ...

Şablonun adı burada http://jordan.rave5.com/tmp/ belgesinin% 100'ünü genişletmiyor backgroudn-overlay ve background-gradient divs. Bu başka bir problem. Lol. Onları BG% 100 genişlik ve yükseklik olarak almaya çalışıyorum.

jQuery:

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

CSS:

  .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: Bunu başarmak nasıl

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

?

Answer 1

Eğer .height

aşağıdaki gibi bir şey yapabilirsiniz kullanarak div yüksekliğini ayarlamak gerekir

:

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

Bu, gölge görüntüyü yeniden boyutlandırmak yardımcı olacaktır:

Çözüm (Not test)

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

senin resmin yüksekliğini almak için .attr kullanmak ('yükseklik'). Daha sonra div'in yüksekliğini ayarlamak için .css ('height', '999') kullanın.