在手邊的項目遇到了一點問題，需要從后台拿取圖片外鏈再展示在前台的詳情頁里。但是外層容器的大小是固定的。而從外聯的圖片傳回來的確實大小不一橫豎不定的圖片。 參考了網上現成的解決方案做了修改后算是解決了這個問題。 解決代碼如下：因為這段代碼的測試圖片是一只小貓，故給這段代碼的類名定為 ...

按父容器寬度自動縮放，並且保持圖片原本的長寬比 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } 　　 ...

在img標簽里面只設置寬，不設置高，圖片就會等比例縮放。 ...

在img標簽里面只設置寬，不設置高，圖片就會等比例縮放。 ...

在img標簽里面只設置寬，不設置高，圖片就會等比例縮放。 ...

在進行布局的時候,很多PM都要求圖片等比例縮放,而且要求圖片不失真,不變形,但是UI設計好了這個div的寬度又不能隨意更改,而后台傳過來的圖片也不是等比例的圖片,這就比較難受了,寫成 width: 100%;和height: 100%; 如果圖片剛好和你設定的div等比例,那自然是沒有問題 ...

...

在img標簽里面只設置寬，不設置高，圖片就會等比例縮放。 #logo { height:100%; } <div class="branding"> <img src="/static/image ...