第一種方式：

.box {position: relative;width: 100px;height: 100px;border: 1px solid #000; } .box a img {position: absolute;max-width: 100px;max-height: 100px;left: 0;right: 0;top: 0;bottom: 0;margin: auto; }.box a {display: inline-block; }<div class="box"><a href="#"><img src="../wwwroot/images/test1.png" /></a> </div>

第二種方式

.td_img {width: 100px;height: 100px;text-align: center;background-repeat: no-repeat;background-size: contain;background-position: center; }<div class="td_img" style="background-image:url(../wwwroot/images/test1.png);"> </div>

?

總結

以上是生活随笔為你收集整理的图片放入固定宽高div，保持纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。