响应绝对定位元素

Question

我有一个图像滑块，但需要在一侧有链接。我目前在图像上设置了我想要的链接，但是在调整屏幕大小时它不会缩小。

如何使用屏幕尺寸缩小此绝对定位元素并随图像大小调整移动？

这是一个JSFiddle https://jsfiddle.net/s0v6j04a/

<div class="sliders">
        <div class="slider"><div id="promo1">
        <div id="promo-link">
        <a href="#">TEST LINK</a>
        </div>
            <img src="https://unsplash.imgix.net/photo-1434139240289-56c519f77cb0?fit=crop&fm=jpg&h=700&q=75&w=1050" />
            </div>

        </div>
    </div>



    #slider{
    position:relative;
    }

.div1, .div2 {
    min-height: 400px;
    background: #D25A1E;
    position: relative;
    width: calc(50% - 30px);
}
.div1 {
    float: left;
    background-image: url('https://ununsplash.imgix.net/photo-1433838552652-f9a46b332c40?fit=crop&fm=jpg&q=75&w=1050') !important;
    background-repeat: no-repeat;
    background-position: center center; 
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
}
.div2 {
    float: right;
    background-image: url('https://ununsplash.imgix.net/photo-1427805371062-cacdd21273f1?fit=crop&fm=jpg&q=75&w=1050') !important;
    background-repeat: no-repeat;
    background-position: center center; 

    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
}
.div1:after, .div2:before {
    content:'';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}
.div1:after {
    left: 100%;
    border-top: 400px solid #D25A1E;
    border-right: 50px solid transparent;
}
.div2:before {
    right: 100%;
    border-bottom: 400px solid #D25A1E;
    border-left: 50px solid transparent;
}
#promo1{width:100%; position:relative;}
#promo1 img{width:100%;}
#promo-link{
    position: absolute;
    z-index: 100000;
    left: 25%;
    top: 50%;
    font-size: 30px;
    padding: 20px 40px;
    border: 2px solid #fff;
    }
#promo-link a{
    text-decoration:none;
    color:#fff;
    font-family:"Times New Roman", Times, serif 
    }