HTML_CSS_JAVASCRIPT_MEMORIES

响应式左右居中图片

定义为：图片在一个div中按比例缩放，不超过容器范围，并且左右居中显示。
考虑多种情况：很长的，很扁的，很大的，很小的。
曾看了一篇文章 https://codemyviews.com/blog/how-to-center-anything-with-css ，这里面说了

<div id="container" style="position:relative;width:40%;padding-bottom:20%;">
  <div id="outer" style="position:absolute;height:100%;width:100%;">
    <div id="inner" style="height:100%;text-align:center;">       
	  <img id="image" src="http://www.newynewz.com/uploads/150610/3-15061019404H56.jpg" style="max-width:100%;max-height:100%;" alt="Responsive image" />
    </div>
  </div>
</div>

container div可以由多种写法，只要保证能提供一个显示空间就可以了。 outer开始为响应式图片控件，outer的position必须为absolute，里面的inner和image不要设置position。