html - 如何为响应式img保留空间(停止跳下来的图 block )

Question

如果图像应该响应，如何解决图像加载后跳下块的问题？
Codesandbox。
信息:

图像应在窗口调整大小时缩小

图片最大宽度是它自己的宽度

我们不知道图片大小

可以使用JS的

主意:
如果没有任何图像尺寸数据是不可能的，那么只能使用图像宽高比来完成吗？
如果知道图像的宽高比，则可以计算块的高度，然后将响应图像放入一些未使用的空间内(至少在较小的窗口尺寸下，未使用的空间不会太大)。
图片加载:

图片已加载:

HTML:

import React from "react";
import "./styles.css";

const img =
  "https://s3.amazonaws.com/images.seroundtable.com/google-css-images-1515761601.jpg";

export default function App() {
  return (
    <div className="app">
      <img alt="" src={img + `?${Date.now()}`} className="img" />
      <h1>I always jump down :(</h1>
    </div>
  );
}

CSS:

.app {
  box-sizing: border-box;
}
.img {
  max-width: 100%;
}
h1 {
  background-color: red;
}

Answer 1

AS @DBS感到遗憾，似乎唯一的解决方案是将图像包装在div块中，该块具有基于window.width和高宽比(在我的情况下，我知道)的高度。如果有更好的解决方案，请随时回答。
沙盒solution example。

import React from "react";
import "./styles.css";
import styled from "styled-components";

const aspectRatio = [1, 5];

const img =
  "https://s3.amazonaws.com/images.seroundtable.com/google-css-images-1515761601.jpg";

export default function App() {
  return (
    <div className="app">
      <StyledDiv>
        <img alt="" src={img + `?${Date.now()}`} className="img" />
      </StyledDiv>

      <h1>I always jump down :(</h1>
    </div>
  );
}

const StyledDiv = styled.div`
  height: calc(100vw / ${aspectRatio[1]});
  overflow-y: hidden;
`;