圖像調整大小與JavaScript沒有視覺障礙

我在我的html頁面上有一個專門的圖像區域。該區域因屏幕分辨率而異。我有一個JavaScript來相應地調整這些區域的大小。問題是，在每次重新加載時，我的圖像都會跳到完整大小，然後回到適合的位置，從而產生非常令人討厭的視覺效果。圖像調整大小與JavaScript沒有視覺障礙

任何人都可以告訴我如何進行以及如何正確調整此圖像的大小？

編輯：調整大小代碼的目的是具有父容器的全部高度。

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

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

來源

2015-10-26 user732456

也許如果你分享你的HTML ＆JavaScript我們可能會建議如何糾正它，而不是從頭開始。 –

請分享問題的代碼。另外，爲什麼你使用JS來使該元素響應？ –

你的頁面跳轉的原因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 ←調整大小並玩得開心

來源

2015-10-26 13:24:47

圖像調整大小與JavaScript沒有視覺障礙

回答

相關問題