无论纵向还是横向,我如何拥有图像:
- 响应式地在水平和垂直方向居中(在调整浏览器窗口大小时保持居中)
- 占据浏览器窗口的固定部分,响应式缩放
- 在调整浏览器窗口大小时保持纵横比
最佳答案
这是一个仅使用基本 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;
}
关于html - 根据浏览器窗口调整、缩放和居中图像 (CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29526947/