CSS可以通過transform屬性來放大圖片,例如:
img { transform: scale(1.5); }
上面的代碼將圖片放大為原來的1.5倍,如果想放大到2倍,只需要把1.5改為2即可。
除了scale,還可以使用其他的transform函數(shù)來放大圖片,例如:
img { transform: scaleX(2); /* 水平放大為原來的2倍 */ } img { transform: scaleY(2); /* 垂直放大為原來的2倍 */ } img { transform: scale(2, 1); /* 水平放大為原來的2倍,垂直不變 */ }
需要注意的是,放大圖片可能會導(dǎo)致圖片模糊,因此可以結(jié)合CSS的image-rendering屬性來優(yōu)化顯示效果,例如:
img { transform: scale(2); image-rendering: pixelated; /* 盡量保留圖片原有的像素顯示效果 */ }
通過以上代碼,可以實(shí)現(xiàn)在CSS中放大圖片的效果。