CSS3中的transform屬性可以實現圖片的中心縮放效果,讓圖片自適應容器大小,實現美觀的效果。
首先,在CSS中設置圖片的樣式:
img{ max-width: 100%; height: auto; }
這樣可以使得圖片自適應容器大小。
接著,使用CSS3中的transform屬性進行縮放:
img{ transform: scale(1); transition: all 0.5s ease-in-out; } img:hover{ transform: scale(1.2); }
使用scale函數來實現圖片的縮放。設置初始值為1,當鼠標懸浮在圖片上時,將圖片的縮放比例調整為1.2,使用過渡效果all和緩動函數ease-in-out可以讓變化更加平滑。
最后,為了讓圖片居中,可以使用CSS中的text-align和vertical-align屬性,在父容器中設置:
.container{ text-align: center; vertical-align: middle; }
這樣就可以讓圖片在容器中水平、豎直居中,實現完美的中心縮放效果。
上一篇css3 可伸縮盒子模型
下一篇css3 圖片上下居中