【问题标题】:Center image horizontally & vertically on page with % margins and be resizable with window在页面上以 % 边距水平和垂直居中图像,并可随窗口调整大小
【发布时间】:2013-05-08 06:30:20
【问题描述】:

就在前一天还这么简单,但我想不通:

如何在页面上将图像居中,为其提供固定的 % 边距(所有边均为 10%),并且在调整大小时仍使其随窗口缩放?

页面和图片在所有平台上都能很好地显示,没有滚动条 (!),这一点非常重要。 页面本身非常简单,只包含图像(在不同版本的页面上具有不同的尺寸),顶部有一个栏,带有将其发送到另一个页面的链接。

图片的最大尺寸为 1500x1000px,没有最小尺寸。

我衷心希望有人能帮助我解决这个问题,非常感谢!

【问题讨论】:

    标签: image centering margins resizable


    【解决方案1】:

    最好的方法是使用 JavaScript。获取窗口大小,订阅 window.onresize 事件并相应更新图像大小和位置。

    仅使用 CSS 是行不通的,因为任何位置属性都依赖于容器。在您的情况下,容器是窗口,它将根据内容自行调整大小。这会产生一种循环依赖(窗口大小取决于图像,图像大小和位置取决于窗口大小)。

    有关以跨浏览器方式获取确切可用窗口大小的信息,您可以查看此帖子:Get the size of the screen, current web page and browser window - 有一段时间没有这样做了,以便为您提供准确的代码。

    另请注意,您没有提到保持图像的纵横比。如果不应该维护,则无法仅使用 HTML/CSS,因为所有使用它们的操作都会维护图像的 AR。

    【讨论】:

    • 谢谢 Dimitar,你回答得这么快真是太棒了!但显然我不得不把网络编码留给专业人士,因为我似乎无法让它发挥作用。我明天要雇一个人,看看他能不能帮我修好。最好的问候和再次感谢,杰伊
    猜你喜欢
    • 2013-03-19
    • 1970-01-01
    • 2013-06-23
    • 1970-01-01
    • 2017-05-18
    • 2015-10-06
    • 2012-08-12
    • 1970-01-01
    • 2014-02-16
    相关资源
    最近更新 更多