​教你用css3實現圖片容器內等比縮放?

教你用css3實現圖片容器內等比縮放

工具/原料

Dreamweaver cs5

步驟/方法

在網頁設計中，要實現圖片容器的等比縮放，之前老辦法可以用CSS3和js來實現，現在HTML5和CSS3這麼火了，現在我們就單純的用CSS3來實現這個縮放效果。

程式碼如下：

效果如下：

如果改變一下容器的大小。比如：

將section的width，height屬性修改為

width:200px;
height:400px;

我們再來看效果：