在页面上居中（垂直和水平）显示一张（未知尺寸的）图像

Posted 2023-03-05

【中文标题】在页面上居中（垂直和水平）显示一张（未知尺寸的）图像

【英文标题】：Display one image (of unknown dimensions) centered (vertically and horizontally) on the page

【发布时间】：2012-08-27 19:02:10

【问题描述】：

如何在不提前知道其尺寸的情况下将单个图像垂直和水平居中？

此外，如果图像大于视口，则应重新调整大小以适应

有没有什么方法可以在不使用 javascript 的情况下完成所有这些工作？

【参考方案1】：

这是我之前做的一个页面 :)

http://kt80.net/

这是整个代码：

bodybackground:#e5e7e6 url(egyptrabbit.jpg) no-repeat fixed 50% 50%

编辑：啊，刚刚看到调整大小以适合部分。您可以在背景图像上使用 CSS3 属性“包含”以确保它始终在窗口内，但如果窗口更大，这将拉伸它。

【讨论】：

这也是一个很好的解决方案，你选择什么取决于你想对图像做什么（如果你只需要将单个图像居中，或者如果你想要文本在顶部，我的例子如果您想要连续多张图片或需要将图片转换为链接，效果会更好）

这太棒了！ （我究竟应该在哪里添加 contain 属性来调整大小以适应工作？）

背景尺寸：包含； -moz-background-size: 包含;

【参考方案2】：

如果包含元素是display: table-cell，你只能垂直对齐，所以设置它，然后你可以使用vertical-align和text-align。这是一个例子：

​<div style="width: 500px; height: 300px; border: 1px red solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="https://www.google.com/images/srpr/logo3w.png">
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

小提琴示例：http://jsfiddle.net/8Aq5Y/

如果您不更改 display，或者将 display 设置为 block 或 inline 之类的内容，则它不起作用。

要确保它适合包含元素，只需使用max-width 和max-height：

<div style="width: 100px; height: 100px; border: 1px red solid; display: table-cell; vertical-align: middle; text-align: center">
<img src="https://www.google.com/images/srpr/logo3w.png" style="max-width: 100px; max-height: 100px;">
</div>​

http://jsfiddle.net/8Aq5Y/3/