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

就能達到了，看看效果