javascript - 使用javascript调整图像大小而不会造成视觉干扰

Question

我的 html 页面上有一个专用图像区域。该区域因屏幕分辨率而异。我有一个 javascript 可以相应地调整这些区域的大小。问题是在每次重新加载时，我的图像都会跳到全尺寸并返回到合适的尺寸，这会产生非常讨厌的视觉效果。

谁能告诉我如何继续以及如何正确调整此图像的大小？

编辑:调整大小代码的目的是拥有父容器的完整高度。

    var windowHeight = $(window).height() - $("#myCarousel").offset().top ;

    $('#myCarousel .carousel-inner div img').css({
        height: (windowHeight) + 'px'
    })

Answer 1

你的页面跳转导致 JS 等待文档准备好或者更糟的是窗口加载，
计算最适合您的图像(显然)，而不是触发调整大小和浏览器重绘。

不要使用 JS 让您的元素响应，使用 CSS 和 % 大小。

有时显示大图片并使其响应良好的最佳方式是将其设置为背景图像:

<div id="heroImage" style="background-image:url(images/largeImage.jpg)"></div>

拥有这个 CSS:

#heroImage{
    height: 900px;                 /* for browsers who don't support "viewport" vh/vw */
    height: 100vh;
    background: 50% / cover;       /* use cover, contain or a %size */
}

jsBin demo ← 调整大小并享受乐趣