从Javascript中删除高度值

Question

我创建了一个响应站点，然后使用一些JS代码在图像上创建了标题，效果很好，但是当我调整浏览器的大小时。 图片无法按比例缩放，我相信这是由于JS中的高度值所致。 如何删除该值并使字幕正常工作？

$(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)   
    });
});

Answer 1

我认为您应该尝试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/

Answer 2

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() });
});