如何使图像上的按钮具有响应性

Question

我有一个客户坚持要求我们使用他们的图形艺术家的图形，而不是我为他们的模型创建的编码和完全响应的框。

因此，我将图形（.png）的位置设置为：relative;并且按钮已放置在图形上，位置为：absolute;。我的问题是，当我调整窗口大小的那一刻，一切看起来都糟透了。按钮直接浮在图像上，根本不停留在图像上。有没有比我在这里做得更好的方法？坦率地说，我有点炸，我觉得我想念一些东西。

这里是站点，已全宽度并已调整大小。

这是我的html-

<span class="ccimg"><figure class="wp-block-image size-large"><img src="img url here" alt="" class="wp-image-280"></figure>
<span class="ccbuttons">
<a href="URL HERE" class="button cc_register">Register</a>
<a href="#" class="button cc_needs">Needs (FIX)</a>
<a href="url here" class="button cc_login">Login</a>
</span>
</span>

<span class="otimg"><figure class="wp-block-image size-large"><img src="https://staging.alexisrichard.com/wp-content/uploads/2020/05/homepage-ot-transparent-e1590173452287-735x1024.png" alt="" class="wp-image-279">

<a href="https://form.jotform.us/92176043972158" class="button ot_register">Register</a></figure>
</span>

这里是css-

.frontpage-container {
        padding: 50px;
}

.ccimg, .otimg {
        position: relative;
        width: 
}


/* This decides how big the OT and CC sections are on the front page*/

.ccbuttons {
        position: absolute;
        top: 310px;
        left: 100px;
}

.cc_needs, .cc_register, .cc_login, .ot_register {
        width: 120px;
        padding: 10px;
        margin: 5px;
        font-family: inherit;

}

.ot_register {
        position: absolute;
        top: 310px;
        left: 100px;
}

这是在generatepress子主题上完成的，因此，如果您想要原始的style.css，我也可以为您提供。让我知道。并感谢您的提前帮助。

Answer 1

这应该使您入门。将img的宽度更改为50vw。更改.ot-register的font_size并使用vw设置顶部和左侧

.frontpage-container {
        padding: 50px;
}

.ccimg, .otimg {
        position: relative;
        width: 
}

img{
width:50vw;
}




/* This decides how big the OT and CC sections are on the front page*/

.ccbuttons {
        position: absolute;
        top: 310px;
        left: 100px;
}

.cc_needs, .cc_register, .cc_login, .ot_register {
        width: 120px;
        padding: 10px;
        margin: 5px;
        font-family: inherit;

}

.ot_register {
        position: absolute;
        top:20vw;
        left:8vw;
        font-size:2vw;
   
   }
   
   img{
   width:50vw;
   }

<span class="ccimg"><figure class="wp-block-image size-large"><img src="img url here" alt="" class="wp-image-280"></figure>
<!--<span class="ccbuttons">
<a href="URL HERE" class="button cc_register">Register</a>
<a href="#" class="button cc_needs">Needs (FIX)</a>
<a href="url here" class="button cc_login">Login</a>
</span>-->
</span>

<span class="otimg"><figure class="wp-block-image size-large"><img src="https://staging.alexisrichard.com/wp-content/uploads/2020/05/homepage-ot-transparent-e1590173452287-735x1024.png" alt="" class="wp-image-279">

<a href="https://form.jotform.us/92176043972158" class="button ot_register">Register</a></figure>
</span>