響應圖像尺寸

我有一個問題，即，當頁面加載時，圖像採取一點點時間來加載，這不僅難看，但打破了向上滾動按鈕的功能（一旦我們向下滾動到頁面底部，它需要絕對定位在頁面的底部 - 但是，在頁面加載時，圖像沒有佔用任何空間，因此JS會計算頁面不正確）。通常你會直接在圖像上設置高度和寬度，但由於圖像尺寸根據屏幕寬度而變化，如上圖所示（在移動設備上，它是流動的，所以我無法手動設置寬度/高度基於斷點），我無法做到這一點。

可能有人知道可以根據圖像寬度設置圖像高度的解決方案嗎？

由於人們似乎不知道爲什麼，我需要絕對定位我的滾動按鈕：https://i.gyazo.com/65629a7e2642e192165596755c5b408b.gif

來源

2016-09-20 bluebu

我們得到了柔性對於這種應用......它可以幫助你..的250只設置寬度 - 300px;和高度自動...它應該調整自己的所有不同的屏幕尺寸。 –

如果您的向上滾動按鈕需要絕對定位，那麼您應該重新考慮您的佈局。 –

像上面提到的那樣，您的滾動按鈕是否位於絕對位置？還是固定的？如果是的話，你應該嘗試'position：fixed;'在這種情況下。該按鈕將相對於瀏覽器窗口。 – AlexG

至於我可以看到所有的圖像具有相同的比例，所以爲什麼不設置僅在寬度上並將高度設置爲自動？

圖像將根據其縱橫比進行縮放。

但是你的JS計算問題更多的是一個JS計時問題，而不是CSS。我猜計算功能太早。

而另一件事：

絕對定位的按鈕並不一定有一個計算方法爲位置...... ，而不是設定一個固定的「底」值計算的「頂」的價值取決於你的需要和可能隱藏它直到達到某個滾動點，以確保它在初始加載/加載最大項目之前不在那裏。

//編輯：「setTimeout」，因爲它在評論中建議應該是你的最後一根稻草，如果一切都失敗了。重新考慮您的佈局和定位，並在訴諸超時之前嘗試其他解決方案。他們所做的只是讓事情變得更加複雜和不可靠。

來源

2016-09-20 10:50:16 Foaster

您應該更具體的圖像大小，以避免瀏覽器渲染時間過長。如果您不告訴瀏覽器圖像的大小，它會構建一次以顯示所有文本，然後它將等待圖像下載並重建它以包圍文本。它會爲你的所有圖像做到這一點。

爲了使圖像響應，你可以設置你的CSS文件中應用此：

img { 
    width: 100%; 
    height: auto; 
    dysplay:block; 
}

我看到你有一些傷了你的佈局沒有找到圖片。有這個小JS的解決方案：

<img src="imagenotfound.gif" alt="Image not found" onerror="this.onerror=null;this.src='imagefound.gif';" />

你可以閱讀更多關於此這裏：https://stackoverflow.com/a/9891041

來源

2016-09-20 11:05:31 cata

響應圖像尺寸

回答

相關問題