html - 响应式设计 - 图片和文字结合在一起

Question

我正在设计一个响应式网站，我一直致力于让这部分成为响应式网站。

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

我也尝试在图像上放置文本，但图像仍然可以响应 ImageMaps 而不是文本字段。

http://i.stack.imgur.com/hPO0f.png

尝试过的代码:

<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();
});

Answer 1

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

FittextJS是一种允许文本缩放的方法。一般来说，文本不会响应地缩放。