防止內容在加載時跳到圖像下方

Question

我目前有一個圖像，我給出了 100% 的寬度。 我注意到的問題是，當圖像加載時，下面的內容會在加載時跳轉到圖像所在的位置。 我知道我需要給圖像某種固定的高度，但我希望圖像保持響應。 預期效果：圖像看起來與應用 100% 寬度時完全一樣，並防止在圖像加載時下面的內容跳躍。 請就此提出建議。 我的代碼如下：

<img src={"https://storage.googleapis.com/youfit-assets/239315_66400_YouFit_JUL21_Mil_Website_1680x761_CarInitial.jpg"}
  alt="travel"
  className="image"/>

款式：

.image {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 100%;
}

為了使用以下鏈接復制我在隱身瀏覽器上看到的測試https://codesandbox.io/s/gifted-montalcini-ohts8?file=/src/App.js

Answer 1

將你的 img 標簽包裹到 div 中，所以它應該看起來像：

<div className="image-wrapper">
    <img src={...} alt="travel" className="image"/>
</div>
<div style={{ marginTop: 60 }}>TEXT BELOW</div>

然后用這種風格替換你的圖像風格（如果你的縱橫比是 4:3）：

.image-wrapper {
    position: relative;
    padding-bottom: 37.5%;
}

.image {
    position: absolute;
    width: 100%;
}

或者如果您的縱橫比為 16:9

.image-wrapper {
    position: relative;
    padding-bottom: 56.25%;
}

.image {
    position: absolute;
    width: 100%;
}