图像调整与javascript没有视觉干扰

image resize with javascript without visual disturbance

本文关键字：视觉 干扰 javascript 调整 图像      更新时间：2023-09-26

我的html页面上有一个专用的图像区域。该区域因屏幕分辨率而异。我有一个javascript来调整这些区域的大小。问题是，每次重新加载时，我的图像都会跳到全尺寸，然后再回到合适的尺寸，这造成了非常糟糕的视觉效果。

谁能告诉我如何继续和如何适当地调整这个图像?

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

    var windowHeight = $(window).height() - $("#myCarousel").offset().top ;
    $('#myCarousel .carousel-inner div img').css({
        height: (windowHeight) + 'px'
    })

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

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

有时，显示大图并使其良好响应的最佳方法是将其设置为background-image:

<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 ←调整大小，玩得开心

相关文章：