响应式设计 - 图像和文本在一起答案

【问题标题】：responsive design - image and text together响应式设计 - 图像和文本在一起
【发布时间】：2015-02-14 11:18:05
【问题描述】：

我正在设计一个响应式网站，但我一直坚持将这部分设为响应式。

附加的是图像，其中红色圆形是用作按钮的图像，该图像下方的字段用作输入文本以输入数据。现在我如何使它具有响应性，以便图像和文本都按比例调整大小。我尝试了 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();
});

【问题讨论】：

发布您尝试过的内容。

标签： html css image responsive-design

【解决方案1】：

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

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

【讨论】：

嗨弗兰克，它没有帮助。
你能发一个jsfiddle吗？也许我不明白这个问题。

【解决方案2】：

弗兰克所说的或者你可以在 css3 中使用 vw 和 vh 单位

vw 代表视口宽度百分比。

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

这是一个演示：http://css-tricks.com/viewport-sized-typography/

【讨论】：