我想设计一个类似地铁的画廊。我已经在带有背景图像的示例中实现了这一点:
http://codepen.io/DanielCoding/pen/jlrgv
但我想用 div 中的普通图像标签替换背景图像。不幸的是,所有图像都在右下角方向拉伸(stretch):
http://codepen.io/DanielCoding/pen/fsKjE/
在第一个代码中,我通过为图像提供不同的背景位置值来解决这个问题,但我不知道简单图像标签或 div 的类似命令。
最佳答案
您可以使用 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;
}
关于html - 与 "background-position"类似的命令,用于 CSS 中的 div/图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23104028/