CSS中設(shè)置圖片的長高可以通過多種方式實(shí)現(xiàn),但通常我們使用height
和width
屬性來調(diào)整圖片的尺寸,這兩個(gè)屬性可以設(shè)置在圖片的CSS樣式中,通過修改它們的值,我們可以輕松地改變圖片的長高。
如果我們有一張圖片,它的原始尺寸是500像素寬和300像素高,我們想要將其寬度增加100像素,并保持高度不變,我們可以這樣寫:
img { width: 600px; /* 增加寬度100像素 */ height: 300px; /* 保持高度不變 */ }
這樣,圖片的新寬度將是600像素,而高度仍然是300像素。
如果我們想要將圖片的高度增加50像素,并允許寬度自動(dòng)調(diào)整以保持縱橫比不變,我們可以這樣寫:
img { height: 350px; /* 增加高度50像素 */ width: auto; /* 允許寬度自動(dòng)調(diào)整 */ }
這樣,圖片的新高度將是350像素,而寬度將自動(dòng)調(diào)整以保持縱橫比不變。
如果圖片有固定的縱橫比(它是一個(gè)正方形或?qū)捀弑葹?:1的圖片),那么調(diào)整其中一個(gè)維度可能會(huì)影響另一個(gè)維度的實(shí)際像素值,在調(diào)整圖片尺寸時(shí),請(qǐng)確??紤]這種縱橫比的影響。