HTML实现图片在容器内自适应居中（SVG的image方案）

SVG 中的 image 元素和 HTML 下的 img 元素有些不同，后者设置 width/height 会对原图片进行非等比缩放，失去原来的图片比例。但是 SVG 中的 image 元素有些不同，设置 width/height 会对图片进行 等比缩放，并且图片会自适应前面设置好的宽高的容器。但如果想对 image 元素进行非等比缩放，可以通过设置 transform 实现。

简单来说可以实现下面这样的效果：

这种不改变图片比例，可以等比缩放图片的效果，可用于做列表中的 item 的缩略图展示（尤其是缩略图没有固定宽高的情况下）。此外也可以做点击图片，全屏预览的效果。

DOM 结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!--样式-->
<style>
    div {
        height: 150px;
        width: 150px;
        border: 1px solid #777;
    }
</style>

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
        <image xlink:href='./bull.jpg' height="100%" width="100%"/>
    </svg>
</div>

只要设置好 div 的宽高，即可使得里面的图片自适应容器并居中。