css - HTML+CSS |更改 `<div>` 内的背景位置 - 我该如何实现？

Question

我有一个 <div>我希望它拥有的容器 height:90vh,width:100vw .

我想调整它的位置，如果还需要其他东西，它们也可以从左图到右图，在我的容器内:

是否可以用像素或其他东西调整位置，这样我就可以在我的容器中“移动”我的图片，但它仍然不会在容器中留下空白空间，所以它完全覆盖它？

提前致谢。 :)

Answer 1

听起来您正在寻找一种始终让图像填充容器的方法，即使容器大小发生变化也是如此。

如果您还没有，请在容器 div 中创建另一个 div 并将它的 background-image 设置为您的图像 url(和删除 img )。然后在新的 div 上设置 background-size: cover;。现在您可以将容器 div 设置为 display: flex; 并弄乱新的 div 对其他周围内容的 react 。

例如

HTML:
<div class="container">
    <div class="image" style="background-image:url(<img_url_here>);"></div>
    <div class="other_varying_height_content"></div>
</div>

CSS:
.container { display: flex; }
.image { background-size: cover; }

注意:您的图片会建议您在 .image 上设置 background-position: center;