　前阵子，产品跑过来问我现有的模板中没有图片模板，需要添加一个图片模板；然而，他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放，并且居中展示图片。我当时想着，抛开技术实现层面，图片展示也理应是这样的，更加友好。当时我就说应该没啥大问题，于是就有了下文（PS:萌新还没技术积累，只能是凭着一点积累和现查来调研）。

1. 图片等比缩放

　　网上搜了一下图片等比缩放，有介绍使用:

 width: auto;height: auto; max-width: 100%; max-height: 100%;

　　使用这个其实没啥大问题，两点细节我补充一下：

　　1.其实，当定义了max-height和max-width的时候，就无需在重复定义width：auto；稍微细想下便知，而且亲测不加width和height为auto也是效果一样。

　　2.有网友提到只加max-width为100%就行，高度让它等比缩放。其实也有不妥，如下图：

　　当图片存在父级（图中2标识），如果再让高度等比例自适应的话，图片就会超出父元素，这显然不是我们想要的。所以，建议同时使用max-width和max-height为100%，宽高不用设置即可。

　代码如下：　

<div style="position: relative;width:100%;heigth:500px;background: #c3e6c2;"><img style="max-width:100%;max-height:100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;" src="http://oc24816dq.bkt.clouddn.com/20090622131631-85311624%5B1%5D.bmp">
</div>

　　效果图：

（1）当父元素宽高够大时，图片展示原尺寸并居中展示

（2）当窗口变窄，图片也随之等比缩小

　　其实，max-width和max-height还有很多其他应用场景，我也没多做总结，有时间的话再对这两个属性在其他使用场景进行介绍。

2.等比例自适应布局

　　直接开门见山，类似的实现相信大家都知道，核心就是利用padding是百分比的情况下是相对于父元素的宽度（PS: 此处相对于父元素的content宽度，即便父元素存在padding，百分比也是相对于content区域，可以自行去做实验验证）。　

　　如果想实现16:9的自适应性比例布局，核心代码如下：

<!DOCTYPE html><body style="background: beige;display: flex;align-items: center;"><div style="position: relative;width:100%;padding-top:56.2%;background: #c3e6c2;"><img style=" max-width:100%;max-height:100%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;" src="http://oc24816dq.bkt.clouddn.com/20090622131631-85311624%5B1%5D.bmp" alt=""></div></body>
</html>

　　效果图：

　　浅绿色区域就是16：9的效果，该部分会随着窗口的变化而按16：9的比例去变化。（56.2% = 9/16*100%）

　　发散：当width和padding设置成相同的百分比时，就能实现自适应性正方形布局了。

拓展思考

　　无意中发现这段css比较实用，而且稍作改动就能实现另一种布局，代码如下：

.middle{position:absolute;top:0;bottom:0;left:0;right:0;margin: auto;
}

　　这段常见的代码用于水平垂直居中，其中的top和bottom同时为0，表示的是该子元素占满父元素的高度；同理left和right为0时表示该子元素占满父元素宽度。

　　利用这段代码能实现好多常见布局，而且兼容性也很好，可以在项目中多多实践和总结。

　　1.实现sticky-footer。原理：将元素的bottom设置为80px，而底部固定一个div，设置成position:fixed;height:80px;大致思路如此。

　　效果图：

（1）当内容区没有足够多文字时

（2）当内容区文字很多，此时出现滚动条（mac滚动条会自动隐藏），但footer仍然在底部

css中图片等比例缩放，自适应16:9实现相关推荐

html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
CSS控制图片等比例缩放
img{ width: auto; height: auto; max-width: 100%; max-height: 100%; }
CSS图片定比例缩放
文章目录前言一.图片定比例缩放方案 1.padding(推荐) 2.根据width设置height 二.图片的路径设置height百分比无效前言一张banner图,在不同的屏幕上铺满宽度与 ...
理解CSS3中的background－size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用ba ...
html图片缩放6,四款css 图片按比例缩放实例(兼容ie6,7,firefox)
使用max-width,max-height:或者min-width,min-height的css属性即可.如: 代码如下 img{max-width:100px;max-height:100px;} ...
jquery实现图片等比例缩放，解决max-width在ie中不兼容问题
上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题 jQuery部分代码 <script typ ...
CSS实战笔记(十二) 图片等比例缩放
1.背景在网页展示图片是一个很常见的需求,大多数情况下,展示区域的大小是固定的,原图片的大小也是固定的如果展示区域的宽高和原图片的宽高不等比例,那么在默认情况下很可能会压缩或拉伸图片以适应区域大小 ...
vue.js 获取当前屏幕的宽度_vue 获取当前屏幕的宽度，图片等比例缩放，动态设置css样式...
vue 获取当前屏幕的宽度,图片等比例缩放这个是一个背景图,点击对应的圆圈就会出现一个蒙层上面显示详情,但是只要当前窗口大小变化了,因为我的蒙层大小是固定的px,所以不会变,就不在图片对应的位置了 ...
html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示
最简单的等比例:div img { max-width:100%; max-height:100%; } 如上显示效果是:图片等比例缩放,不变形:图片所有区域都会显示. 但是,如上代码有可能会造成横向 ...
html图片固定高宽比显示,科技常识：CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法的相关资料,希望小伙伴们看 ...

css中图片等比例缩放，自适应16:9实现

1. 图片等比缩放

代码如下：

效果图：

2.等比例自适应布局

拓展思考

css中图片等比例缩放，自适应16:9实现相关推荐

最新文章

热门文章