使用弹性滑块如何使控制箭头响应

Question

调整幻灯片大小时，图像会与浏览器一起调整大小，这很棒，但是控件上一个/下一个我用图像替换了文本，它们保持静态。由于我使用文本识别来隐藏文本，因此我必须为要显示的箭头图像设置固定的宽度和高度。现在，与幻灯片图像一起时如何调整其大小？

Answer 1

通过媒体查询将箭头图像定位到较小的屏幕。例如。要定位小于 480 像素的屏幕，您可以执行以下操作：

@media only screen and (max-width: 480px) {
    .flex-direction-nav .flex-next,
    .flex-direction-nav .flex-prev {
        -webkit-background-size:50%;
        -moz-background-size:50%;
        background-size:50%;
        background-position: 50% 50%;
    }
}

通过使用background-size属性，可以调整箭头图像的大小。我把它缩小了50%。你可以玩这个价值观来适应你自己的品味和满意度。