div裏面一個img標籤的不變形、不超出、上下左右居中的解決辦法
這段時間做一個比較簡單的小項目，當中有一個圖片展示的頁面，當我把數據圖片展示到前端的時候，發現前端小姐姐寫的css樣式有點小小的問題，就是我從後臺返回到前端的圖片，有的長，有的寬，大小不一，這裏列舉兩張圖片，一張長，一張寬：
原本的樣式就是無解皮皮蝦固定長寬，就導致圖片成了這樣：
很明顯，變形了。
因此，首先讓它不變形，
代碼（這樣就可以同時滿足長和寬都不超出邊框）：
div{
width：650px；
height：500px
}
img{
max-width: 100%;
max-height: 100%;
}
ok，然後就變成了這樣：
很明顯，上下沒有居中，有人說，可以給img加上：
vertical-align:middle;
text-align:center;
dispaly:block;
margin:0 auto;
圖片設爲背景，然後：background-position:center;
等一系列方法。。。
但是~我試了都不行（各個頁面情況不同，小夥伴們也可以試試上面的方法）
然後我最後用這種辦法給它搞居中了：
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
最終代碼：
div{
width：650px；
height：500px
}
img{
max-width: 100%;
max-height: 100%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ok~下面是最終效果：
解決戰鬥~
網上很多讓圖片按長縮放和按寬縮放的辦法，但是大多隻考慮了一種情況，
我經過多次試驗，發現這種辦法確實可以解決我的此次需求。
現在分享出來，供大家參考~
