响应浏览器窗口 (CSS) 调整、缩放和居中图像

Posted

技术标签:

【中文标题】响应浏览器窗口 (CSS) 调整、缩放和居中图像【英文标题】:Fit, scale and center image responsively to browser window (CSS) 【发布时间】:2015-06-14 03:17:18 【问题描述】:

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

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

【问题讨论】:

【参考方案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;

【讨论】:

差不多了,但是当图像小于容器时,它不会放大图像。 height: 100%; width: 100%; object-fit: contain; 解决了它,但是是的,它是 CSS4 规范。不过,浏览器支持很广泛。

以上是关于响应浏览器窗口 (CSS) 调整、缩放和居中图像的主要内容,如果未能解决你的问题,请参考以下文章

响应式对齐、浮动和居中图像

如何缩放和居中图像并使图像之间的空间成比例

Flex网格和背景图像并排响应/缩放问题

在响应式方形 div 中垂直居中图像

响应式 HTML5 视频 - 在 iOS 中调整大小

如何缩放 SVG 图像以填充浏览器窗口?