就在一天前，这似乎很简单，但我想不通：
如何在页面上将图像居中，为其提供固定的 % 边距（所有边均为 10%），并且在调整大小时仍使其随窗口缩放？
页面和图像在所有平台上都能很好地显示，没有滚动条（！），这一点非常重要。页面本身非常简单，只包含图像（在不同版本的页面上具有不同的尺寸），顶部有一个带有链接的栏，可以将其发送到另一个页面。
图片的最大尺寸为 1500x1000px，没有最小尺寸。
我衷心希望有人能帮助我解决这个问题，非常感谢！
问问题
66 次
1 回答
0
最好的方法是使用 JavaScript。获取窗口大小，订阅 window.onresize 事件并相应地更新图像大小和位置。
仅使用 CSS 是行不通的，因为任何位置属性都依赖于容器。在您的情况下，容器是窗口，它将根据内容自行调整大小。这会产生一种循环依赖（窗口大小取决于图像，图像大小和位置取决于窗口大小）。
有关以跨浏览器方式获取确切可用窗口大小的信息，您可以查看这篇文章：获取屏幕大小、当前网页和浏览器窗口- 有一段时间没有这样做了，以便为您提供准确的代码。
另请注意，您没有提到保持图像的纵横比。如果不应该维护它，就没有办法只使用 HTML/CSS，因为所有使用它们的操作都会维护图像的 AR。
于 2013-05-08T06:40:53.227 回答