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 ←调整大小并享受乐趣

使用javascript调整图像大小，没有视觉干扰

1 个答案: