Question

我试图让我的img-wrapper高度达到其宽度的80％。当我调整窗口大小时，下面的代码会激活并正常工作，问题是函数无法获得正确的宽度值。相反，宽度取为100，因此高度计算为80px。

该网站正在使用bootstrap，我试图制作看起来有点像宝丽来照片的卡片。图像包装器需要具有标准的宽高比，图像本身需要包含在包装内，但我不能确定图像是否具有正确的宽高比。

近乎工作的JS：

fixSize = function() {
    $('.card-img-wrapper').each(function() {
        width = $(this).width();
        height = width * 0.8;
        $(this).height(height);

        // Hiding the loader wheel
        $(".loader").hide();

        // Showing hidden elements to avoid flickering and resizing
        $(this).parent().removeClass("hide");
    });
}

$(window).on('load', fixSize);
$(window).resize(fixSize);

HTML

<!-- This is within PHP foreach loop -->
<div class="col-md-4">
    <a class="float-left wh100" href="p_info.php?pID=<?php echo($p['ID']); ?>">
        <div class="card hide">
            <div class="card-img-wrapper">
                <img src="<?php echo($p['imagepath']); ?>">
            </div>
            <h3><?php echo($p['name']); ?></h3>
            <p>Price: <?php echo($p['price']); ?> €</p>
        </div>
    </a>
</div>

CSS

/* Helper Classes */

.float-left {
    float: left;
}

.wh100 {
    width: 100%;
    height: auto;
}

.hide {
    visibility: hidden;
}


/* Card */

.card {
    width: 100%;
    margin-bottom: 30px;
    padding: 30px;
    overflow: hidden;
}

.card-img-wrapper {
    width: 100%;
    height: 25vh;
}

.card-img-wrapper img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

Answer 1

将您的fixSize函数包装在jQuery文档就绪函数中。

$( document ).ready(function() {
     $(window).resize(fixSize);
});

Answer 2

我认为在加载内容之前，可能会在页面加载时立即调用resize函数，从而调用fixSize函数。试试这个。

$(window).on('load', function() {
    fixSize();
    $(window).resize(fixSize);
});

正如@mister-positive建议将代码包装在文档就绪函数中也可能是一个好主意。

在加载内容之前触发onload事件

2 个答案: