CSS中按照原圖比例可以讓我們輕松的控制圖片的大小并且保持圖片的比例不變。比如我們有一個原圖尺寸為寬度500像素,高度300像素的圖片。
/* html */ <img src="example.jpg" class="img" /> /* css */ .img { width: 100%; height: auto; }
在上面的代碼中,我們使用了CSS屬性width: 100%和height: auto來確保圖片始終與其容器相同的寬度,并且將高度設置為自動適應,保持了原圖比例不變。在這種情況下,如果容器寬度為400像素,則圖片寬度為400像素,高度為240像素,與原圖比例相同。
當然,如果我們想要強制圖片以一定的比例縮放,可以使用padding屬性來控制容器的高度,比如說我們想讓圖片寬度為容器寬度的50%,高度為寬度的60%,則可以這樣寫:
.img { width: 50%; padding-top: 60%; position: relative; } .img img { position: absolute; top: 0; left: 0; width: 100%; }
在上面的代碼中,我們使用了padding-top: 60%屬性來控制容器的高度,即“高度為寬度的60%”,使圖片按照指定比例縮放。我們還使用了position: relative和position: absolute屬性將圖片定位在容器中心。
總之,在CSS中按原圖比例進行圖片的大小調整可以幫我們更好的保持圖片的比例并保證圖片在不同設備上顯示的質量。