javascript - 全宽 slider ,里面有响应元素

标签 javascript css responsive-design

我正在尝试做一个内部有两个链接的 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/

相关文章:

javascript - 这又迷路了

css - 完全隐藏不完全适合其父级可见部分的 block 元素

javascript - 将元素滑出屏幕 -- 等待 --- 滑回原位

javascript - JQuery Datepicker/Datetimepicker - 如何根据选定的选项在 java 中设置 MaxDate

javascript - 从对象中的对象获取每个值 - Javascript

c# - 如何确定设备是否为桌面浏览器?

css - 移动CSS不申请导航

html - float 元素被前一个元素向下推

javascript - 使用 JS 删除 <div> 部分无法按预期工作

css - 将勾选应用于超出边界的复选框