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

Question

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

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

是否可以用像素或其他东西调整位置，这样我就可以 "move" 我的照片在我的容器中，但它仍然不会留空 space 在容器中，所以它会完全覆盖它？

提前致谢。 :)

Answer 1

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

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

例如

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;

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

HTML+CSS | Change Background Location Inside `<div>` - How Can I Achieve This?

css

containers

background

image

background-image