$( 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
查看此错误答案 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)
在最后一行,如果我调整窗口大小以运行该功能,我会重新加载窗口。