Responsive design 响应式绝对定位元件

我有一个图像滑块，但需要在一边有一个链接。目前，我已将链接设置在图像上所需的位置，但当屏幕调整大小时，它不会缩小

如何使这个绝对定位的元素随屏幕大小而缩小，并随图像大小而移动

这是一个JSFiddle

#滑块{
位置：相对位置；
}
.div1、.div2{
最小高度：400px；
背景：#D25A1E；
位置：相对位置；
宽度：计算（50%-30px）；
}
.1分部{
浮动：左；
背景图像：url（'https://ununsplash.imgix.net/photo-1433838552652-f9a46b332c40?fit=crop&fm=jpg&q=75&w=1050")重要,；
背景重复：无重复；
背景位置：中心；
-o-背景尺寸：100%100%，自动；
-moz背景尺寸：100%100%，自动；
-webkit背景尺寸：100%100%，自动；
背景尺寸：100%100%，自动；
}
.第2分部{
浮动：对；
背景图像：url（'https://ununsplash.imgix.net/photo-1427805371062-cacdd21273f1?fit=crop&fm=jpg&q=75&w=1050")重要,；
背景重复：无重复；
背景位置：中心；
-o-背景尺寸：100%100%，自动；
-moz背景尺寸：100%100%，自动；
-webkit背景尺寸：100%100%，自动；
背景尺寸：100%100%，自动；
}
.div1:之后.div2:之前{
内容：''；
位置：绝对位置；
排名：0；
宽度：0；
身高：0；
}
.第一组：之后{
左：100%；
边框顶部：400px实心#D25A1E；
右边框：50px实心透明；
}
.第2课：之前{
右：100%；
边框底部：400px实心#D25A1E；
左边框：50px实心透明；
}
#promo1{宽度：100%；位置：相对；}
#promo1 img{宽度：100%；}
#促销链接{
位置：绝对位置；
z指数：100000；
左：25%；
最高：50%；
字体大小：30px；
填充：20px 40px；
边框：2倍实心#fff；
}
#促销链接a{
文字装饰：无；
颜色：#fff；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线
}

您确定“左：25%”吗？大屏幕尺寸会使链接更偏向左侧。你确定“左侧：25%”吗？在大屏幕尺寸下，链接更多地贴在左侧。

<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 
    }