jQuery Match div Höhe mit dynamischer Bildhöhe

Question

Ich habe ein Bild, das eine Breite von 100% und eine Mindestbreite von 1024px hat. Ich möchte meinen "Schatten" div über dem Bild behalten und auch seine Höhe anpassen, wenn sich die Fenstergröße ändert, wodurch sich die Bildgröße proportional zur Fensterbreite ändert. Mein aktueller Code scheint nichts zu tun ...

Vorlage ist hier http://jordan.rave5.com/tmp/ Sie werden die backgroudn-Overlay und Hintergrund-Gradient divs nicht 100% des Dokuments zu erweitern. Das ist ein anderes Problem. Lol. Ich versuche, die BG 100% Breite und Höhe zu bekommen.

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:

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

Wie kann ich das erreichen? Dies wird Ihnen Ihr Schattenbild die Größe helfen

Answer 1

Sie die Höhe des div mit .height

Sie so etwas wie die folgenden tun können festlegen müssen:

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

:

Solution (Nicht geprüft)

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

Um die Höhe des Bildes zu erhalten, verwenden .attr ('Höhe'). Dann, um die Höhe des div festzulegen, verwenden Sie .css ('Höhe', '999').