2

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

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

有没有办法在不使用 Javascript 的情况下完成所有这些工作？

4

2 回答 2

9

这是我之前所做的一个页面：）

http://kt80.net/

这是整个代码：

body{background:#e5e7e6 url(egyptrabbit.jpg) no-repeat fixed 50% 50%}

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

于 2012-09-03T01:59:21.993 回答
5

如果包含元素是 of ，您只能垂直对齐display: table-cell，所以设置它，然后您可以使用vertical-alignand 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设置为类似blockor ，则它不起作用inline。

要确保它适合包含元素，只需使用max-widthand 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/

于 2012-09-03T01:51:15.450 回答