ios - 固定容器内的 CSS 全宽图像

Question

有什么方法可以确保图像始终全屏显示，而不管其上放置了哪些容器大小限制？在我的情况下，我从服务器接收到一个 HTML 文件，其中包含不同大小的各种不同容器中的图像（通常以百分比指定），对于每个图像，我想使用 CSS 来“突破”容器并始终占据完整-屏幕宽度。

我该怎么做呢？

Answer 1

要“分解它们”，您需要通过img { position: absolute; }在 CSS 中应用将它们与堆叠上下文分开。然后，您可以通过应用img { width: 100%; }填充将它们带至全窗口宽度......但您可能会因此遇到布局问题。您可能应该专注于在文档的堆叠上下文中使包装容器全宽，以保持布局的完整性（此处将随着您最终选择的任何路线而改变）。