Html 响应性设计-图像和文字结合

我正在设计一个响应性强的网站，我一直致力于使这一部分具有响应性

附件是图像，其中红色圆形是用作按钮的图像，图像下方的字段用作输入文本以输入数据。现在，我如何使其响应，以便图像和文本按比例调整大小。 我尝试了ImageMaps插件，但我了解的是，该插件适合于图像大小调整，而不是图像和文本字段作为一个整体

我还尝试将文本放置在图像上，但图像仍然会响应ImageMaps，而不是textfield

已尝试的代码：

<img id="img-htp" class="img-center img-responsive img-margin" width="2419" height="897" src="{res}images/home1.jpg" usemap="#image-maps" alt="Home Figure">
    <map name="image-maps" id="image-maps">
        <area  alt="language" title="Language" href="http://www.google.ca" shape="rect" coords="0,317,267,587" style="outline:none;" target="_self"/>
        <area  alt="sign me in" title="Sign me in" href="login" shape="rect" coords="555,314,821,584" style="outline:none;" target="_self"/>
        <area  alt="create future account" title="Create future account" href="login/registeration" shape="rect" coords="2161,319,2419,586" style="outline:none;" target="_self"/>
    </map>

使用的脚本：

<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});

$（文档）.ready（函数（e）{
$（'img[usemap]'）。rwdImageMaps（）；
});

---

js库可能会为您提供最好的服务

---

是一个允许文本缩放的工具。一般来说，文本不会相应地缩放

弗兰克说了什么，或者你可以使用css3中的

vw

和

vh

单元

vw

表示视口宽度百分比

如果您有

字体大小：10vw您的字体大小将为屏幕宽度的10%

这里有一个演示：
发布您尝试过的内容。嗨，Frank，它没有帮助。您可以发布JSFIDLE吗？也许我不理解这个问题。