关于对img标签进行放大但是不超出外框的实现

最近在搞h5开发的时候遇到一个问题：

在导航栏的li标签里面放置了一张img,img浮动于li标签的左边。

导航栏的结构如下所示：

<ul id="nav_group">
<li class="animate">
<div>
<div class="portrait"> <img class="animate" src="img/cdr_z.png"> </div>
<div class="text"></div>
</div>
</li>
<li class="animate">
<div>
<div class="portrait"> <img class="animate" src="img/cdr_z.png"> </div>
<div class="text"></div>
</div>
</li>
<ul>

现在要实现一个效果：当鼠标放在img上面的时候，img进行放大，且不能超过li标签边界！

实现放大这个好说：

<img class="animate" src="img/cdr_z.png">

首先是一个过渡效果^_^!

.animate {
-webkit-transition: all .3s ease;  /* Safari and Chrome */
-moz-transition: all .3s ease;     /* Firefox */
-o-transition: all .3s ease;       /* Opera */
-ms-transition: all .3s ease;      /* IE 9 */
transition: all .3s ease;
}

/**
鼠标放上，图片变大
*/
#nav_group li img:hover {
transform-origin: center center;
transform: scale(1.1,1.1);
-webkit-transform-origin: center center;
-webkit-transform: scale(1.1, 1.1);
-moz-transform-origin: center center;
-moz-transform: scale(1.1, 1.1);
-o-transform-origin: center center;
-o-transform: scale(1.1,1.1);
-ms-transform-origin: center center;
-ms-transform: scale(1.1,1.1);
}

但是img放大的时候超过了li标签的边界，这个怎么解决？方案如下：

1、把img放在一个div标签里面：

<div class="portrait">
<img class="animate" src="img/cdr_z.png">
</div>

2、设置div的样式：

#nav_group .portrait{
float: left;
width: 220px;
height: 220px;
overflow: hidden; /* 当溢出的时候隐藏*/
}

加上overflow: hidden这个属性就可以了，这个很关键！