CSS可以很方便地控制圖片的大小和比例。要讓圖片按照4:3的比例顯示,可以用以下的CSS代碼:
img { max-width: 100%; height: auto; padding-bottom: 75%; }
首先,我們使用max-width屬性來確保圖片不會超出其容器的寬度。這意味著圖片的最大寬度將是其容器的寬度,而高度將自動根據比例調整。
接下來,我們使用padding-bottom屬性來確保圖片按照4:3的比例顯示。padding-bottom的值設置為75%是因為4:3的比例等于3/4,而75%正好是100%的3/4。
這個方法非常簡單,并且適用于不同尺寸和比例的圖片。但是,它只對寬高比為4:3的圖片有效。如果你需要控制其他比例的圖片,請相應地調整padding-bottom的值。例如,如果你需要控制1:1的圖片,可以將padding-bottom設置為100%。