如何在不提前知道其尺寸的情况下垂直和水平居中单个图像?
此外,如果图像大于视口,则应重新调整大小以适应
有没有办法在不使用 Javascript 的情况下完成所有这些工作?
如何在不提前知道其尺寸的情况下垂直和水平居中单个图像?
此外,如果图像大于视口,则应重新调整大小以适应
有没有办法在不使用 Javascript 的情况下完成所有这些工作?
这是我之前所做的一个页面:)
这是整个代码:
body{background:#e5e7e6 url(egyptrabbit.jpg) no-repeat fixed 50% 50%}
编辑:啊,刚刚看到调整大小以适合部分。您可以在背景图像上使用 CSS3 属性“包含”以确保它始终在窗口内,但如果窗口更大,这将拉伸它。
如果包含元素是 of ,您只能垂直对齐display: table-cell
,所以设置它,然后您可以使用vertical-align
and 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
or ,则它不起作用inline
。
要确保它适合包含元素,只需使用max-width
and 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>