记一次产品需求：图片等比缩放和CSS自适应布局16:9

前言

　　前阵子，产品跑过来问我现有的模板中没有图片模板，需要添加一个图片模板；然而，他要求图片在展示区最好能够实现随着窗口的变化而自动按图片比例等比缩放，并且居中展示图片。我当时想着，抛开技术实现层面，图片展示也理应是这样的，更加友好。当时我就说应该没啥大问题，于是就有了下文（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;