3

画像フレームを上に置くと、中の画像が少しズームインしますが（サイズ遷移を使用しています）、フレームは同じサイズのままになります。

フレームの幅と高さが固定されていても、画像に合わせてズームされたままになるとどうなりますか

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

4

2 に答える 2

5

これを修正する 1 つの方法は、overflow:hidden; を設定することです。

したがって、これはうまくいくかもしれません：

.img-wrapper {
  width: 400px;
  height:200px;
  overflow:hidden;
}
于 2012-09-18T15:22:38.120 に答える
1

画像を中央に配置したい場合（ブライアンの回答に加えて）、これを行うことができます：

.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;
}
于 2012-09-18T15:59:47.677 に答える