2

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

我认为它很好用。我有一个缺陷我想要的确切效果。因为 4k 现在是一件事，而且显示器分辨率很快就会提高，所以我将不得不花更多时间确保标题图像的宽度约为 4000 像素，以适应他们的屏幕。

我的问题是。在宽度 =“100%”的表格中，有没有办法将其更改为宽度 = 100%，但窗口大小超过了 1920 像素，是我的一张图像的大小，然后 100% 停止？

我问是因为我正在工作的项目我的徽标浮动在标题图像上，但在单元格中向左对齐，因此每当您将窗口的左侧拖出时，它都会停留，但图像会被吃掉。你可以在这里看到它http://www.theroyaloaknonington.co.uk/beta/

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

检查几个段落的实时示例链接。如果您的显示器不超过 1920，那么它看起来会很好，但是如果您拖动窗口的左侧以缩小尺寸，您会看到徽标移动。可悲的是，当它的扩展范围超过 1920 年时，标志还在继续。我希望它是免费的，但停在图像的末尾。

4

5 回答 5

5

确实如此，而且非常简单：

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

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

于 2013-09-04T08:27:27.647 回答
3

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

使用媒体查询可能有更好的方法来做到这一点，也许确定设备宽度是否超​​过 1920 像素，然后将表格宽度显式设置为 1920。

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

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

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

于 2013-09-04T08:27:09.510 回答
3 
table {
    max-width: 1920px;
}

使用CSS 媒体查询

即使用https://github.com/scottjehl/Respond

于 2013-09-04T08:27:40.207 回答
3 
max-width: 1920px;

应该这样做。并且只有正常宽度 100%

于 2013-09-04T08:28:29.680 回答
1

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

对于其余部分，您应该阅读有关响应式设计和CSS 媒体查询的内容

于 2013-09-04T08:32:31.640 回答