Jquery 放大/缩小时如何保持图像和按钮之间的比例

我试图制作一个显示图像、块文本和按钮的面板，无论页面大小/缩放如何，都保持与下一个模型上显示的比例类似的

我第一次尝试使用一个文本被书写的图像（即不使用文本、图像和背景的不同部分或div），但我发现当文本位置因图像扩展/收缩而改变时，无法调整按钮位置

因此，我考虑将不同部分的基本元素分开（如中），一个div用于图像，一个用于背景，一个用于文本，一个用于按钮

由于我在这方面没有太多经验，我想询问一些代码示例或建议，说明如何以最有效的方式面对这一挑战，因为在研究之后，我没有找到类似情况的解释，我甚至不知道从哪里开始

现行代码 我已经拥有的代码（仅使用一个图像和按钮）是：

index.html:

<section id="feature_slider">       
        <a class="imagebutton" href="sign-up.html">Start Project Now</a>
</section>

#feature_slider {
    margin-top:50px;
    max-width:100% !important;
    background-position:center;
    background-size:contain;
    background: url(../img/backgrounds/BG_whiteb.png) no-repeat;
    height:510px; 
}


.imagebutton
 {
     background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #FFADEB),
    color-stop(1, #C9498F)
);
background-image: -o-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -moz-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -webkit-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -ms-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: linear-gradient(to bottom, #FFADEB 0%, #C9498F 100%);
border-radius:3px;
font-size:32px;
color:#fff;
float:right;
margin-right:12.2%;
margin-top:380px;
padding:15px;
}

<section id="feature_slider">
    <div id="image1"></div>
    <div id="text1"></div>
    <div id="button1">  <a class="imagebutton" href="sign-up.html">Start Project Now</a> </div>   
    </section>

#feature_slider {
    margin-top:50px;
    max-width:100% !important;
   position:relative;
    background:transparent;
    height:510px; 
}

#image1{
        width:70%;
        padding-top:35%;
        margin-top: 58px;
        background:url(../img/red_cut.jpg) no-repeat;
        margin-left: -1%; 
        position:absolute;
        left:0;
        top:0;
}
#text1{width:35%;padding-top:25%;margin-top: 2%;margin-right:2.2%; background:url(../img/text3.png) no-repeat;position:absolute;right:0;top:0;} 

#button1{width:20%;padding-top:5%;background:transparent;position:absolute;right:0;margin-top:23.9%;margin-right:10.5%;}

.imagebutton
 {
     background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #FFADEB),
    color-stop(1, #C9498F)
);
background-image: -o-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -moz-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -webkit-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -ms-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: linear-gradient(to bottom, #FFADEB 0%, #C9498F 100%);
border-radius:3px;
font-size:32px;
color:#fff;
padding:7px;
}

更新： 多亏了@otinaai的例子，我设法使它看起来更体面，但问题是，带有背景图像的div在缩放时四处移动，然后按钮就放错了位置。（顺便说一句，我在文本中使用了图像） 以下是更新的代码：

index.html:

<section id="feature_slider">       
        <a class="imagebutton" href="sign-up.html">Start Project Now</a>
</section>

#feature_slider {
    margin-top:50px;
    max-width:100% !important;
    background-position:center;
    background-size:contain;
    background: url(../img/backgrounds/BG_whiteb.png) no-repeat;
    height:510px; 
}


.imagebutton
 {
     background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #FFADEB),
    color-stop(1, #C9498F)
);
background-image: -o-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -moz-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -webkit-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -ms-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: linear-gradient(to bottom, #FFADEB 0%, #C9498F 100%);
border-radius:3px;
font-size:32px;
color:#fff;
float:right;
margin-right:12.2%;
margin-top:380px;
padding:15px;
}

<section id="feature_slider">
    <div id="image1"></div>
    <div id="text1"></div>
    <div id="button1">  <a class="imagebutton" href="sign-up.html">Start Project Now</a> </div>   
    </section>

#feature_slider {
    margin-top:50px;
    max-width:100% !important;
   position:relative;
    background:transparent;
    height:510px; 
}

#image1{
        width:70%;
        padding-top:35%;
        margin-top: 58px;
        background:url(../img/red_cut.jpg) no-repeat;
        margin-left: -1%; 
        position:absolute;
        left:0;
        top:0;
}
#text1{width:35%;padding-top:25%;margin-top: 2%;margin-right:2.2%; background:url(../img/text3.png) no-repeat;position:absolute;right:0;top:0;} 

#button1{width:20%;padding-top:5%;background:transparent;position:absolute;right:0;margin-top:23.9%;margin-right:10.5%;}

.imagebutton
 {
     background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #FFADEB),
    color-stop(1, #C9498F)
);
background-image: -o-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -moz-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -webkit-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: -ms-linear-gradient(bottom, #FFADEB 0%, #C9498F 100%);
background-image: linear-gradient(to bottom, #FFADEB 0%, #C9498F 100%);
border-radius:3px;
font-size:32px;
color:#fff;
padding:7px;
}

---

您可以使用每个容器宽度的百分比值，并通过

媒体查询

控制各种屏幕大小

请参阅a

或者，为了保持纵横比，您可以利用

padding top

，这取决于容器的大小（单位为%）

并调整框架大小，以查看在所有3个容器中如何保持纵横比

这种方法的唯一缺点是使用文本或其他html元素。因为我使用

padding top

来保持容器的纵横比，所以所有子元素都不会与每个容器的顶部对齐。但是，您可以通过使用

背景图像

或通过播放负

边距顶部

值，或仅通过定位每个容器中的

绝对

所有元素来解决此问题