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是允许文本扩展的内容。通常，文本不会响应缩放。

Answer 2

弗兰克说过或你可以使用vw＆amp; css3中的vh单位

vw代表视口宽度百分比。

如果你有font-size:10vw;，你的字体大小将是屏幕宽度的10％。

以下是演示：http://css-tricks.com/viewport-sized-typography/

响应式设计 - 图像和文字在一起

2 个答案: