如何使用CSS使图像响应？

Question

如何使图像响应，以便在更改屏幕尺寸时保持其比例？即如果我在图像的中间右侧有一个书籍封面（如此处的标题图像http://julianadorney.com/），如何将书籍封面保留在不同屏幕上图像的大致相同位置？

我使用大约30种不同的最小高度和最小宽度的媒体查询来评判一些东西，但似乎应该有一个更优雅的解决方案。

我试过宽度：100％和身高：自动;没有运气

请，没有Javascript。我不知道它是什么......

提前致谢， 儒略

Answer 1

对不起，我知道为时已晚，您已经知道了。 但我会回答。 您可以使用

使图像响应

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

<img src="https://1.bp.blogspot.com/-MEzgCTqi2es/X3dZYeZFtuI/AAAAAAAATc0/ltXNshjx26wqPp1bVSMf9R-EWINMpHRYgCLcBGAsYHQ/s16000/A%2Bcommercieal%2BFair%2B6.jpg" alt="Image of Banijjo Mela 2020">

然后查看屏幕。您也可以使用媒体来做到这一点。