image 居中且图片不变形

保持高宽比率

图片居中不变形，网上有不少方法，但多少有点问题。
在上一篇 iframe 自适应宽高 中也有一段关于图片的处理方法: 如果不想图片比原始比例大，则使用max-width:100%

img {
    max-width: 100%;
    height: auto;
}

上边代码如果在展示多图时，需要到外边再包一层 div 来设置一样的高宽，但如果图片有大有小，则会有部分空白。

intrinsicsize

chrome71+ img 支持的新属性 link: https://googlechrome.github.io/samples/intrinsic-size/

• 示例一
  如果未在图像上另外设置宽度/高度，则尺寸由“ intrinsicsize”指定。

<img intrinsicsize="250 x 200" src="cat.jpg">

image.png

• 示例二
  如果在图像上设置了宽度，则将高度设置为保持“ intrinsicsize”中定义的宽高比。

<div style="width:300px">
      <img intrinsicsize="250 x 200" style="width:100%" src="cat.jpg">
</div>

image.png

• 示例三
  如果在图像上设置了宽度和高度，则“ intrinsicsize”属性的值只会影响naturalWidth / naturalHeight的值，而不会影响图像的渲染大小。

<img intrinsicsize="250 x 200" width="450" height="400" src="cat.jpg">

image.png