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

Question

我正在尝试创建一个显示图像，块文本和按钮的面板，保持与下一个模型上显示的比率相似<无论问题页面大小/缩放是什么。

我首先尝试使用带有文字的图像（即不使用不同的部分或div用于文本，图像和背景）但我发现在文本位置时无法调整按钮位置因图像扩展/缩小而改变。

因此，我考虑将不同部分（如www.freelancer.com）中的基本元素分开，图像为一个div，背景为一个，文本为一个，按钮。

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

现有代码

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

的index.html：

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

index.css：

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

更新

感谢@ otinanai的例子，我设法使它看起来更加体面，但问题是带有背景图像的div在缩放时移动，然后按钮最终错位。 （顺便说一下，我用过图像的文字） 这是更新的代码：

的index.html：

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

index.css：

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

Answer 1

您可以使用每个容器宽度的百分比值来设置，使用media queries可以控制各种屏幕尺寸。

查看 simple demo here 。

或者，为了保持宽高比，您可以使用padding-top，这将取决于容器的大小（以％为单位）。

See this demo here 并调整框架大小以查看如何在所有3个容器中保留纵横比。

这种方法的唯一缺点是使用文本或其他html元素。因为，我使用padding-top来保持容器的宽高比，所有子元素都不会与每个容器的顶部对齐。但是，您可以使用background-images或播放带有margin-top值的来解决此问题，或者只需在每个容器like this demo中定位absolute所有元素}。