CSS大小过渡保留在父div中

Question

我希望有一个图像框架,当我在它上面时,里面的图像会放大一点(我正在使用尺寸过渡),但框架将保持相同的大小.

现在发生的事情是,即使框架具有固定的宽度和高度,它也会随着图像放大

HTML:

<div class="img-wrapper">
  <img class="thumbnail" src="http://placekitten.com/400/200">
</div>

和CSS

.img-wrapper {
  width: 400px;
}
.thumbnail {
  width: 400px;
}

.thumbnail {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.thumbnail:hover {
  width: 500px;

  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

http://codepen.io/pen/KCJny

Answer 1

解决这个问题的一种方法是设置overflow:hidden;

所以,这可能有效:

.img-wrapper {
  width: 400px;
  height:200px;
  overflow:hidden;
}