HTML + CSS |更改`<div>`中的背景位置 - 我如何实现这一目标？

Question

我有一个height:90vh,width:100vw容器，我希望它有<repository> <id>snacktory_snapshots</id> <url>https://github.com/karussell/mvnrepo/raw/master/snapshots</url> </repository> 。

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

是否可以用像素或其他东西调整位置，以便我能够“移动”＃34;我的照片放在我的容器内，但它仍然不会在容器中留下空的空间，所以它完全覆盖它？

提前致谢。 ：）

Answer 1

听起来你正在寻找一种方法，即使容器改变尺寸，也总是让图像填满它的容器。

如果您还没有，请在容器div内创建另一个div，并将其设置为background-image到您的图片网址（并移除img）。然后在新background-size: cover;上设置div。现在，您可以将容器div设置为display: flex;，并弄清楚新div将如何对其他周围内容作出反应。

E.g。

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; }

注意：您的图片会建议您在background-position: center;

上设置.image