在页面上显示一个居中(垂直和水平)图像(未知尺寸)

Question

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

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

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

Answer 1

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

http://kt80.net/

这是整个代码:

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

编辑:啊,只是看到调整大小适合部分.您可以在背景图像上使用CSS3属性"contains"以确保它始终位于窗口内,但如果窗口较大,这将拉伸它.

Answer 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/