从Javascript中删除高度值

我已经创建了一个响应网站，然后使用一些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)   
    });
});

$（窗口）.load（函数（）{
//对于p.caption的每个实例
$（“p.caption”）。每个（函数（）{
$（本）
//添加以下CSS属性和值
.css({
//高度等于图像的高度
“高度”：$（this.children（“img”）.height（）+“px”，
//宽度等于图像的宽度
“宽度”：$（this.children（“img”）.width（）+“px”
})
//选择此p标题的子项“范围”
//添加以下CSS属性和值
.children（“span”）.css(
//宽度等于p
//但是减去20px就可以对填充进行校准
“宽度”，$（this.width（）-20+“px”）
//查找标记（如果存在）
//然后添加以下div以断开该行
.在（“”）之后查找（“大”）；
//当您将鼠标悬停在p.caption上时
$（“p.caption”）.hover（函数（）{
//在孩子的“跨度”中逐渐消失
$（this.children（“span”）.stop（）.fadeTo（400,1）；
}，函数（）{
//一旦鼠标离开，它就会消失
$（this.children（“span”）.stop（）.delay（600）、fadeOut（400）；
});
//完$（本）
});
});

jQuery.resize（）

将为您解决此问题

您只需将该过程代码存储为可重新执行（函数），然后根据相对（父）DOM维度重新触发它

'use strict';

removeHeight(){
    // That code here
}

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

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

---

我想你应该试试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");
    });
});

我重构了您的代码并创建了一个小提琴：

---

谢谢你的帮助。我只是注意到，当你缩小浏览器时，它会完美地调整大小，但当你增加浏览器大小时，图像不会缩放。是否有另一个调整大小的功能来实现这一点？