响应浏览器窗口 (CSS) 调整、缩放和居中图像 [英] Fit, scale and center image responsively to browser window (CSS)

问题描述

我如何拥有一张图片，无论是纵向还是横向:

• 响应地水平和垂直居中(在调整浏览器窗口大小时保持居中)
• 占据浏览器窗口的固定部分，响应缩放
• 在调整浏览器窗口大小时保持纵横比

解决方案

这里有一个解决方案，只需基本 CSS(不需要 CSS3)即可满足上述所有要求:

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

HTML

<!-- 这是风景图片--><img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/><!--或使用此肖像图像；仍然有效<img src="http://upload.wikimedia.org/wikipedia/commons/9/9d/Britishblue.jpg"/>-->

CSS

.container {宽度:80%；高度:80%；位置:绝对；保证金:自动；顶部:0；底部:0;左:0;右:0;背景颜色:#aaa;}图片{最大宽度:100%；最大高度:100%；位置:绝对；保证金:自动；顶部:0；底部:0;左:0;右:0;}

How do I have an image, irrespective of portrait or landscape:

• centered responsively both horizontally and vertically (remains centered as browser window is resized)
• occupies a fixed fraction of the browser window, scaling responsively
• preserves aspect ratio as browser window is resized

解决方案

Here's a solution that satisfies all of the above with only basic CSS (no CSS3 required):

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;
}

这篇关于响应浏览器窗口 (CSS) 调整、缩放和居中图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！