设置一个“奇数”图像作为响应式全屏背景，在React/RedwoodJS中显示整个图像

Question

这里有点奇怪的请求 - 我需要将图像设置为背景，为此我通常会使用封面，但我需要图像的所有边缘始终可见（附有图像）。我已经尝试了所有传统方法，但我开始考虑也许可以设置一个绝对定位的顶级元素，并在其上方放置另一个相对“正常”div，以允许正常的 React 开发。 （我的版本是.webp，不是.svg）

想法？ 尝试过绝对定位的版本，当然还有像您在这里找到的东西：https://css-tricks.com/perfect-full-page-background-image/

“背景图片，RedwoodJS，React，布局，CSS”

Answer 1

使用视口单位设置图像的高度和宽度。

img {
    height:100vh;
    width:100vw;
}