如何让容器占据页面宽度的 100%？

Question

我对自己在做什么感到困惑。先来看看我的小sn-p：

HTML：

 <div class="image_container"></div>

CSS：

 .image_container {
 background-image: url("images/wall.jpg");
 height: 120px;
 width: 100%;
 }

我在上面使用的是有一个带有图像作为背景的容器，它将占据用户屏幕的整个宽度，因为我使用的是宽度：100%。但在我的 13 英寸 Mac 上，它看起来是这样，但是当我使用更大的屏幕时，图像会部分显示，但不会占用 100% 的屏幕。为什么尽管使用宽度 100% 它仍然不会占用整个宽度？

我尝试查看是否可以使用 background-repeat:repeat-x 但这只是重复图像并且看起来很糟糕。我还能做什么或有其他方法吗？

Answer 1

因为您设置了 div 的宽度，而不是图像。试试background-size: cover;

哦...container 实际上应该是 class。