连续高度? jQuery的

时间:2016-12-22 17:37:37

标签: jquery html css

$( window ).ready(function() {
            if ($( document ).width() > 576) {
                $('.col').each(function() {
                    var parentHeight = $(this).parent().height(); 
                    $(this).height(parentHeight);
                }); 
            }
            else {console.log("Mobile.")}
        });

这是我的代码。 我有这样的HTML:

<div class="row">
            <div class="col col-8"><img src="assets/images/vizhanyo-erdeklodes.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/mor-pluszmunka.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/fizika-peldatar.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
        </div>
        <div class="row">
            <div class="col col-8"><img src="assets/images/vizhanyo-szep-almokat.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/vizhanyo-art.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
            <div class="col col-8"><img src="assets/images/mor-az-on-otthonaban.jpg" alt="Egy mém, ami neked nem tölt be." class="col-img"></div>
        </div>

问题在于,行内的col并不总是完美的。有时所有行(第一行除外)变为~5px高。为什么? 您可以在www.imarkus.me/2020b

查看此错误

3 个答案:

答案 0 :(得分:0)

可能是因为resize高度是由里面的图像定义的,当你的JS开始时可能还没有加载。

有不同的解决方案。最简单的方法是使用https://github.com/mgufrone/pdf-to-html

您也可以使用flexbox:https://github.com/liabru/jquery-match-height 不需要JS,但并非所有浏览器都支持此功能。

如果你想坚持使用你的解决方案:在你的div上添加一个var setHeight = function() { $('.col').each(function() { var parentHeight = $(this).parent().height(); $(this).height(parentHeight); }); } setHeight(); // initial call $('.row, .col').on('resize', setHeight); 监听器,并在每个调整大小时调整高度。像

这样的东西
col

(未测试的)

修改将{{1}}添加到侦听器。

答案 1 :(得分:0)

我认为您需要为图片添加高度和宽度。如果你添加你的样式表。它每次都会保留固定大小的图像。

img{
   width: 50px;
   height: 50px  
}

如果您想在不同尺寸的屏幕上使用不同尺寸的图像。你可以使用@media标签来实现。

@media screen and (min-width: 580px) {
   img{
       width: 20px;
       height: 20px  
   }
}

现在你的图像高度和宽度将是20像素。

答案 2 :(得分:0)

我必须在函数之前使用setTimeout。

box = ann.arrow_patch._posA_posB
tbox = fig.transFigure.inverted().transform(leader_line_box)
print tbox
line = Line2D(tbox.T[0], tbox.T[1],transform=fig.transFigure)

在最后一行,如果我调整窗口大小以运行该功能,我会重新加载窗口。