关于图片文字等比缩放的处理方案

[c1987222]

页面上分成两块区域：
1 img标签当作background，其中有若干区域作为文字的轮廓，可以参照下面的图片。

2 还有一个div标签作为text的container，div标签浮于img标签的上方。但要保证text落在img的框框里面。

现在这个页面需要根据PC、手机和平板进行等比缩放，
请问各位前辈有没有什么比较好的方式来调整img和text的大小，让img和text的相对位置固定，text不会超出img上面的框框呢？

谢谢！

[c1987222]

引用 1 楼 xuzuning 的回复:

可以尝试使用 css 的 zoom 属性 http://www.baidu.com/link?url=w9U9tYKUxmIMpd3wvG1fXQpFdc7pi34U-2_A1xuThIYHImLkko75Su2YQPQW02efTCILFvobu2UUox7oIsbKrM5C3ob99yNEw9xqtDSX_Pa

貌似CSS的zoom属性FireFox不支持，所以还是有一定的局限性啊

[xuzuning]

可以将所有的尺寸都改成 em 为单位 不过计算量大了点

[xuzuning]

可以尝试使用 css 的 zoom 属性 http://www.baidu.com/link?url=w9U9tYKUxmIMpd3wvG1fXQpFdc7pi34U-2_A1xuThIYHImLkko75Su2YQPQW02efTCILFvobu2UUox7oIsbKrM5C3ob99yNEw9xqtDSX_Pa

[c1987222]

目前还没找到一种理想的方案，不过好在现在的平板浏览器对屏幕内容的自适应缩放做得比较好，大致可以达到效果。