适应，缩放和中心图像响应浏览器窗口（CSS）

Question

如何拍摄图像，无论是肖像还是风景：

• 水平和垂直响应中心（在浏览器窗口调整大小时保持居中）
• 占据浏览器窗口的固定部分，响应缩放
• 在调整浏览器窗口大小时保留宽高比

Answer 1

这里有一个解决方案，只需要基本的CSS（不需要CSS3）即可满足以上所有要求：

http://jsfiddle.net/dvidby0/sytj1uws/1/

<强> HTML

<div class="container">
<!-- this is a landscape image-->
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
<!--or use this portrait image; still works
<img src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Britishblue.jpg"/>
-->

<强> CSS

.container {
width: 80%;
height: 80%;
position: absolute;    
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
background-color: #aaa;
}

img {
max-width: 100%;
max-height: 100%;  
position: absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}