我正在尝试做一个内部有两个链接的 slider ,问题是:
此 slider 内部有两个六边形,它们是链接,在不同的窗口大小下,此六边形的位置会发生变化,并且在调整大小时它们需要与图像保持相同的位置。
我的 jsFiddle: http://jsfiddle.net/wtkd/7qr5w511/2/
全屏 View : http://jsfiddle.net/wtkd/7qr5w511/2/embedded/result/
这两个六边形的位置正确,但是如果我把 background-size:100%
放在图像中,图像仍然没有全宽在我的 <div class="img-slider>
将获得全宽,但六边形不遵循该位置,有人可以帮助我找到一种方法来保持六边形始终位于同一点吗?
最佳答案
我猜这就是你想要的。一点点数字魔术就完成了。
.carousel .item .hexagon{
height: 64%;
left: 9.5%;
position: absolute;
top: 1.5%;
width: 22.5%;
}
.carousel .item .right{
right: 13.5%;
height: 64%;
bottom: 1.8%;
width: 22.5%;
}
这里是 DEMO
关于javascript - 全宽 slider ,里面有响应元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25265200/