html - 与 "background-position"类似的命令，用于 CSS 中的 div/图像

Question

我想设计一个类似地铁的画廊。我已经在带有背景图像的示例中实现了这一点:

http://codepen.io/DanielCoding/pen/jlrgv

但我想用 div 中的普通图像标签替换背景图像。不幸的是，所有图像都在右下角方向拉伸(stretch):

http://codepen.io/DanielCoding/pen/fsKjE/

在第一个代码中，我通过为图像提供不同的背景位置值来解决这个问题，但我不知道简单图像标签或 div 的类似命令。

Answer 1

您可以使用 transform 来缩放图像，使用 transform-origin 来控制缩放的方向。

.star1:hover,
.star2:hover,
.star3:hover,
.star4:hover {
    -webkit-transition: -webkit-transform 0.2s;
    -webkit-transform: scale(1.2);
}

.star1:hover {
  -webkit-transform-origin: bottom right;
}

.star2:hover {
  -webkit-transform-origin: bottom left;
}

.star3:hover {
  -webkit-transform-origin: top right;
}

.star4:hover {
  -webkit-transform-origin: top left;
}

http://codepen.io/anon/pen/oxsge/