CSS自適應圖片固定長寬比是網頁設計中的常用技巧。在圖片尺寸不確定的情況下,通過設置CSS樣式,可以使圖片在縮放時保持長寬比例不變,不會出現拉伸變形的情況,提高用戶體驗。
具體實現方法如下:
.img-container { position: relative; width: 100%; max-width: 1000px; /* 圖片最大寬度 */ margin: 0 auto; /* 水平居中 */ overflow: hidden; /* 避免圖片溢出 */ } .img-container img { position: absolute; left: 50%; /* 圖片左側距離 */ top: 50%; /* 圖片上方距離 */ transform: translate(-50%, -50%); /* 居中 */ max-width: 100%; /* 最大寬度100% */ height: auto; /* 長度自適應 */ }
首先,創建一個包含圖片的容器,設置相對定位,寬度為100%。圖片最大寬度設置為1000px,超出部分會被隱藏。設置margin屬性可以實現水平居中。注意overflow屬性一定要設置為hidden,否則圖片可能會存在溢出問題。
接下來,設置圖片樣式,絕對定位,位置屬性設置為50%。然后通過CSS3的transform屬性將圖片居中。為了保持長寬比例不變,將最大寬度設置為100%,高度自適應即可。
通過以上CSS樣式設置,即可實現自適應圖片固定長寬比功能。