css实现图片虚化_CSS中实现图片自适应的方法

在我们布局中难免会遇到，图片或icon因为大小不一样，但在我们写样式时高宽都固定，而导致图片拉升影响美观. 你可以选择让UI重新切图或者自己切，但是你要知道的是，如何让图片在固定的范围内自适应大小。

• 首先来看看demo吧:

<div class="img-wrapper">
            <img src="./ruby.png" />
        </div>
        <div class="img-wrapper">
            <img src="./hert.png" />
        </div>
        <div class="img-wrapper">
            <img src="./clock.png" />
      </div>
.img-wrapper {
    width: 57px;
    height: 57px;
    margin: 20px;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
}

我们一般都会这样去设置一个icon。但是我这里的icon都不一样大，所以显示是这样的：

可以明显看到，心心已经明显变形了，变得非常宽，肚子变大了，而闹钟变窄了，那下面就来让他们变得正常：

.img-wrapper {
    position: relative;
    width: 57px;
    height: 57px;
    margin: 20px;
}

.img-wrapper img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    margin: auto;
}

我们只需要给让图片定位，给margin:auto就能达到了，看看效果