我有一个我非常喜欢的网页。我必须支持像1020X768这样的小分辨率。但对于那些拥有更大显示器的访客，我想利用额外的空间。喜欢设置最小宽度，但可以随屏幕增长。
我想做这样的事情，但我认为顶部的图像会让这很困难。是否有任何方式可以使图像在下面的内容区域扩展而不会扭曲？
这是我的网页：
http://sarahjanetrading.com/js/j/Patient-Summary.html
谢谢
答案 0 :(得分：0)
您是否尝试过将max-width：100％添加到图片？
答案 1 :(得分：0)
当然可以做到。提供您需要的所有代码建议是非常重要的。最好一次拍下它，并在遇到问题时询问具体的建议：
布局通常需要“流畅”。您将需要使用相对测量单位（如ems和/或％）将其拉出。阅读“流体布局”以开始使用。
使“箭头”特别宽（如果你想让它们在高度上也可能超高），将它们设置在右边并垂直居中于各自的容器中，设置“overflow：hidden”为这些容器，随着容器的增长，它们将揭示更多图像的“隐藏”部分，产生它们伸展但不会扭曲图像的错觉。
这是一个半心半意的概念证明：
http://jsfiddle.net/q2Wdc/2/ [已更新完整图片样本]
我说半心半意，因为我遇到了一些我没想到的问题。我谦卑地承认，按照我设想的方式去做，因为这些原因，CSS并不是完全无足轻重的：
a）默认情况下，图像将按照它们在标记中出现的顺序彼此“堆叠”。为了敲定它，我向右浮动并颠倒了列表顺序。
b）要真正流畅（不仅仅是对媒体查询的响应），你需要能够在相关单位工作。但是创造重叠的负边际呢？这不仅需要以％为单位设置，而且“移位”如果不处理则会破坏流体对齐。我不确定我的方法（-5％由更宽的％补偿）在所有情况下都能正常工作。
c）所有'箭头'都需要填实。我想做一个透明的效果，但当然当两个半透明箭头重叠时，交叉像素的暗度是预期的两倍。糟糕！
无论如何，我错了：它并不像想象的那么容易。如果有人想要改进CSS以使其正常工作（Home first，Special last，填充父容器），我会非常有兴趣看到你的方法。但是对我来说，我不得不减少我的损失，否则我会砸掉可能永远都看不到的代码。 ; - ）
“windows”方法仍然具有优点，并且可以很容易地适应媒体查询，您可以按照已知间隔（布局为1024，布局为1280）进行调整，因为您可以将某些单位设置为像素。
无论如何都有意尝试它！