Question

很好奇，因为我喜欢为任何屏幕设计要调整的图像，然后将它们设置为宽度为100％的单元格背景，以便当人们调整窗口大小或显示器大小不同时。图像将被窗口吃掉，但单元格中的徽标仍将悬停在所需位置的图像上。

我觉得它很棒。我有一个缺陷，我想要的确切效果。因为4k现在是一个东西，显示器的分辨率很快就会增加，我将不得不花更多的时间来确保标题图像大约为4000px宽，以适合他们的屏幕。

我的问题是。在宽度=“100％”的表格中，有一种方法可以将其更改为宽度= 100％，但是窗口大小超过我的一张图像大小的1920px然后100％停止？

我问，因为我正在工作的项目我的标识浮动在标题图像上，但是在左边的单元格中对齐，所以无论何时拖动窗口的左边，它都会停留，但图像会被吃掉。你可以在http://www.theroyaloaknonington.co.uk/beta/

看到它

遗憾的是，在宽度超过1920的分辨率的显示器上，徽标仍会从图像流向灰色区域，因为图像宽度只有1920px。想知道阻止这种情况的最佳方法是什么？

查看几段的实时示例链接。如果您的显示器不超过1920，那么它看起来会很好但是如果您拖动窗口的左侧以使尺寸变小，您将看到徽标移动。令人遗憾的是，当它延伸到1920年以后，徽标继续存在。我希望它是免费的，但停在图像的尽头。

Answer 1

它很简单：

table {
    width: 100%;
    max-width: 1920px;
}

对于更复杂的要求，您需要开始查看@media个查询，您可以在其中指定各个样式适用的屏幕尺寸范围。

Answer 2

您可以使用max-width: 1920px;来防止元素超出该宽度。

使用媒体查询可能有更好的方法，可能确定设备宽度是否超过1920px，然后明确地将表格宽度设置为1920.

编辑：使用媒体查询，您可以使用：

@media only screen and (min-width : 1920px) {
    table { 
        width: 1920px;
    }
}

值得注意的是，1920分辨率的最小宽度可能略小于1920，可能是1880或类似的东西。

Answer 3

table {
    max-width: 1920px;
}

Answer 4

max-width: 1920px;

应该这样做。只需要正常宽度100％

Answer 5

永远不要使用表格进行布局，使用DIV（或HEADER元素）和CSS。

对于其他内容，您应该阅读responsive design和CSS media queries