可变宽度网站答案

【问题标题】：Variable Width Website可变宽度网站
【发布时间】：2011-05-09 13:45:07
【问题描述】：

我尝试创建一个可变宽度的网站，但图像有问题。我希望网站在更宽的显示器上拥有更大的图像和字体，而在普通显示器上则更小。我想到的解决方案是使用百分比，但是图像（对于按钮、背景和标题）在调整大小时看起来有点糟糕。是否有其他解决方案可以根据浏览器宽度调整图像和内容的大小？

谢谢

【问题讨论】：

我不确定我是否理解您的问题。显然缩放图像会使它们看起来很糟糕，那么你想做什么呢？
如果您尝试通过更改Height 和Width 在<IMG> 标记或CSS 样式中的值来调整图像大小，那么模糊和像素化可能是您可以期待的最佳选择。通常，图像不会调整大小以适应屏幕尺寸。

标签： html image autoresize

【解决方案1】：

您可能需要混合使用 JavaScript 和 CSS；使用 JavaScript 确定屏幕的尺寸，并使用它来计算调整大小的比例，并更改对象的 CSS 属性。

在制作样式表时，您可能还想使用 em 中的大小而不是像素。

调整图像大小时，您还必须牢记纵横比，因此您不能只对宽度和高度应用百分比值。

【讨论】：

我不明白你在说什么宽高比。宽度和高度乘以相同的百分比怎么不一样？
嗯，我想我累了，可能在想别的事情，你就在那儿。

【解决方案2】：

首先要做的是检查您是否真的需要这些图像。我还没有看到它们，所以我认为你非常需要它们。

但您实际上并不需要任何 javascript 来执行此操作。

根据您的目标受众和构建网站所需的时间，您可以尝试使用 CSS 媒体查询来确定用户显示的宽度。（您可以在这里了解更多信息：http://www.alistapart.com/articles/responsive-web-design/）您可以使用简单的 CSS 条件语句检查目标显示分辨率。如果您知道哪种展示类型最受潜在客人欢迎，您可以为不同的用户准备 3-4 组不同尺寸的图片。

通过这种方式，您可以为不同的用户分辨率提供不同尺寸的图像。

但首先你需要 100% 的图片，然后你可以使用 CSS 实现相同的效果。

【讨论】：

好吧，我有每个按钮的图标，所以我不明白如何使用 css 实现相同的功能。感谢您的回复，我一开始会尝试这个解决方案，但我的想法是制作一个完全可调整大小的网站。
那么我猜你需要 javascript + 服务器端图像大小调整。我不是合适的程序员，但我想我会寻找可以嗅探用户显示尺寸、发送尺寸参数并通过一些 AJAX 查询重新加载图像的 Javascript 解决方案。我不知道任何足够快且不是服务器端的体面的图像大小调整解决方案。