页面调整大小时的图像拉伸 - 通过 jquery 更改 css - 需要刷新？答案

【问题标题】：Image stretch on page resize - css changed through jquery - needs a refresh?页面调整大小时的图像拉伸 - 通过 jquery 更改 css - 需要刷新？
【发布时间】：2014-02-01 12:50:21
【问题描述】：

我有一个大的水平滚动条，我通过 javascript/jquery 设置其高度。它最初渲染得很好，并且在调整大小时我已经改变了

(if div.height > page.height ) div.height:100%;

这种性质的东西，一切正常......我把它切换回来

(if page.height > specifiedheight ) div.height:specifiedheight;

哪个有效...但是由于某种原因，当它第一次呈现调整大小时，图像全部水平拉伸...但是如果我继续调整大小，它会自行修复。可能是一个错误，我不确定。我的宽度总是自动的，我的高度是指定的高度或 100%。这可能是一个错误，但我不确定。也许有一种方法可以重绘图像或其他东西，这样它们就不会拉伸？

如何复制此问题：http://elijahhoffman.com/test 将页面缩小到 550px 以下 - 您将看到值发生变化。将其调整到超过 550 像素并放开它，您将看到图像长度（取决于您将其调整到多远）

我正在使用的代码：

function resizeevents() {
pageheight = $(window).height();
if (pageheight<scrollheight) {
 $('#hscroll').css('height','100%');
 $('#hscroll').css('margin-top','initial');
 $('#hscroll').css('top','initial');
}
else {
 $('#hscroll').css('height',scrollheight);
 $('#hscroll').css('margin-top',(-scrollheight/2));
 $('#hscroll').css('top','50%');
}

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeevents, 100);
});

在初始文档中指定滚动高度（在本例中为 550）

【问题讨论】：

您需要一个else 语句来重置样式。
样式确实以这种方式倒退，是的，我想我应该用 else 语句编写它，但它仍然会以我相信的方式呈现。
我会尝试使用else 语句，但可以使用media queries 来实现吗？
是的，它可以，也可能没有错误 - 但我有不同的页面，具有不同的滚动高度（图像高度），我不想为每个页面编写媒体查询规则。

标签： javascript jquery css image-scaling

【解决方案1】：

由于某种原因，计时器把一切都搞砸了。我把它放在那里是为了保存计算，但这没什么大不了的。现在一切都在 window.resize 函数下。

【讨论】：