固定容器内的CSS全宽图像

Question

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

我将如何做到这一点？

Answer 1

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