css - 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

解决此问题的一种方法是设置溢出：隐藏；

所以，这可能有效：

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

Answer 2

如果您希望图像保持居中（作为 Brian 答案的补充），您可以这样做：

.thumbnail {
  width: 400px;
  position:relative;
  left:50%;
  margin-left:-200px;
}

.thumbnail:hover {
  width: 500px;
  margin-left:-250px;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}