從Javascript中刪除高度值

我創建了一個響應網站，然後使用一些JS代碼在圖像上創建標題，但是當我重新調整瀏覽器的尺寸時，它們可以正常工作。這些圖像沒有像他們應該的那樣縮放，我相信這是因爲在JS中被賦予了一個高度值。如何刪除此值並使標題起作用？從Javascript中刪除高度值

$(window).load(function(){ 
    // For each instance of p.caption 
    $("p.caption").each(function(){ 
    $(this) 
     // Add the following CSS properties and values 
     .css({ 
      // Height equal to the height of the image 
      "height" : $(this).children("img").height() + "px", 
      // Width equal to the width of the image 
      "width" : $(this).children("img").width() + "px" 
     }) 
     // Select the child "span" of this p.caption 
     // Add the following CSS properties and values 
     .children("span").css(

      // Width equal to p.caption 
      // But subtract 20px to callibrate for the padding 
      "width", $(this).width() - 20 + "px") 

     // find the <big> tag if it exists 
     // And then add the following div to break the line 
     .find("big").after('<div class="clear"></div>'); 

     // When you hover over p.caption 
     $("p.caption").hover(function(){ 

      // Fade in the child "span" 
      $(this).children("span").stop().fadeTo(400, 1); 
      }, function(){ 
      // Once you mouse off, fade it out 
      $(this).children("span").stop().delay(600).fadeOut(400); 
     }); 
    // End $(this) 
    }); 
});

來源

2013-03-18 AlistairWilliams

我想你應該試試window.resize。

$(window).resize(function() { 
    $("p.caption").each(function() { 
     var item = $(this); 
     var big = item.find("big"); 

     item.css({ 
      "height" : item.children("img").height() + "px", 
      "width" : item.children("img").width() + "px" 
     }).children("span").css("width", item.width() - 20 + "px"); 
    }); 
});

我重構代碼，並創建了一個小提琴：

http://jsfiddle.net/VinnyFonseca/6Kv9U/1/

來源

2013-03-18 21:34:12

感謝。我只注意到，當你縮小瀏覽器時，它會完美調整大小，但是當你增加瀏覽器大小時，圖像不會縮放。是否有另一個調整大小的功能，讓這個工作？ – AlistairWilliams 2013-03-20 09:16:11

jQuery.resize()會解決這個你http://api.jquery.com/resize/

你只需要存儲的程序代碼是重新執行（功能），然後再觸發它基於親屬（父母）DOM尺寸。

'use strict'; 

removeHeight(){ 
    // That code here 
} 

$(document).ready(function(){ 
    // Initial removal 
    removeHeight(); 

    // Removal when resizing 
    $(window).resize(function() { removeHeight() }); 
});

來源

2013-03-18 21:27:17

從Javascript中刪除高度值

回答

相關問題