Chiều cao div đối sánh jQuery với chiều cao hình ảnh động

Question

Tôi có hình ảnh có chiều rộng được đặt thành 100% và chiều rộng tối thiểu là 1024px. Tôi muốn giữ div của tôi 'bóng' trên hình ảnh, và cũng phù hợp với chiều cao của nó như là thay đổi kích thước cửa sổ, gây ra kích thước hình ảnh để thay đổi tương ứng với chiều rộng cửa sổ. Mã hiện tại của tôi dường như không làm gì cả ...

Mẫu ở đây http://jordan.rave5.com/tmp/ bạn sẽ nhận thấy các lớp phủ backgroudn và background-gradient không mở rộng 100% tài liệu. Đó là một vấn đề khác. Lol. Tôi đang cố gắng để họ có được chiều rộng và chiều cao BG 100%.

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> 

Làm thế nào tôi có thể thực hiện điều này?

Answer 1

bạn cần phải thiết lập chiều cao của div sử dụng .height

bạn có thể làm một cái gì đó như sau:

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

này sẽ giúp bạn thay đổi kích thước hình ảnh bóng của bạn:

Solution (Không kiểm tra)

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

Để có được chiều cao của hình ảnh của bạn, sử dụng .attr ('chiều cao'). Sau đó, để đặt chiều cao của div, sử dụng .css ('height', '999').