記一次產品需求：圖片等比縮放和CSS自適應布局16:9
前言
前陣子，產品跑過來問我現有的模板中沒有圖片模板，需要添加一個圖片模板；然而，他要求圖片在展示區最好能夠實現隨著窗口的變化而自動按圖片比例等比縮放，並且居中展示圖片。我當時想著，拋開技術實現層面，圖片展示也理應是這樣的，更加友好。當時我就說應該沒啥大問題，於是就有了下文（PS:萌新還沒技術積累，只能是憑著一點積累和現查來調研）。
1. 圖片等比縮放
網上搜了一下圖片等比縮放，有介紹使用:
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
使用這個其實沒啥大問題，兩點細節我補充一下：
1.其實，當定義了max-height和max-width的時候，就無需在重復定義width：auto；稍微細想下便知，而且親測不加width和height為auto也是效果一樣。
2.有網友提到只加max-width為100%就行，高度讓它等比縮放。其實也有不妥，如下圖：
當圖片存在父級（圖中2標識），如果再讓高度等比例自適應的話，圖片就會超出父元素，這顯然不是我們想要的。所以，建議同時使用max-width和max-height為100%，寬高不用設置即可。
代碼如下：
<div style="position: relative;width:100%;heigth:500px;background: #c3e6c2;"> <img style=" max-width:100%; max-height:100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;"
src="http://oc24816dq.bkt.clouddn.com/20090622131631-85311624%5B1%5D.bmp">
</div>
效果圖：
（1）當父元素寬高夠大時，圖片展示原尺寸並居中展示
（2）當窗口變窄，圖片也隨之等比縮小
其實，max-width和max-height還有很多其他應用場景，我也沒多做總結，有時間的話再對這兩個屬性在其他使用場景進行介紹。
2.等比例自適應布局
直接開門見山，類似的實現相信大家都知道，核心就是利用padding是百分比的情況下是相對於父元素的寬度（PS: 此處相對於父元素的content寬度，即便父元素存在padding，百分比也是相對於content區域，可以自行去做實驗驗證）。
如果想實現16:9的自適應性比例布局，核心代碼如下：
<!DOCTYPE html> <body style="background: beige;display: flex;align-items: center;"> <div style="position: relative;width:100%;padding-top:56.2%;background: #c3e6c2;"> <img style=" max-width:100%; max-height:100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;" src="http://oc24816dq.bkt.clouddn.com/20090622131631-85311624%5B1%5D.bmp" alt=""> </div> </body> </html>
效果圖：
淺綠色區域就是16：9的效果，該部分會隨著窗口的變化而按16：9的比例去變化。（56.2% = 9/16*100%）
發散：當width和padding設置成相同的百分比時，就能實現自適應性正方形布局了。
拓展思考
無意中發現這段css比較實用，而且稍作改動就能實現另一種布局，代碼如下：
.middle{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
這段常見的代碼用於水平垂直居中，其中的top和bottom同時為0，表示的是該子元素占滿父元素的高度；同理left和right為0時表示該子元素占滿父元素寬度。
利用這段代碼能實現好多常見布局，而且兼容性也很好，可以在項目中多多實踐和總結。
1.實現sticky-footer。原理：將元素的bottom設置為80px，而底部固定一個div，設置成position:fixed;height:80px;大致思路如此。
效果圖：
（1）當內容區沒有足夠多文字時
（2）當內容區文字很多，此時出現滾動條（mac滾動條會自動隱藏），但footer仍然在底部
2.該段代碼還可以實現只水平居中或只垂直居中；還可以實現寬度、高度自適應布局等等。大家可以自己好好想想。
總結：
這是最近應用到項目中的css代碼段，覺得不錯就總結分享一下。如有不正確或更好的建議，歡迎留言討論。
附上一篇關於響應式布局的文字，個人覺得不錯，分享一下：https://yusi123.com/2539.html。
歡迎推薦和關註，你的鼓勵是我前進的動力！！！
記一次產品需求：圖片等比縮放和CSS自適應布局16:9