我有一个带有文本的 div,其高度、宽度和位置(顶部和左侧)以百分比指定,以便它可以随浏览器窗口调整大小。这个 div 还有一个背景图像,我想在调整大小时保持其纵横比,并且我想调整文本大小以使其适合 div 的边界。
我找到了一个 jQuery 插件,我对其进行了一些修改,以便我可以调整字体大小 onResize 以适应 div。结果:http: //jsfiddle.net/JMVXA/10/
现在我要做的是把这个 div 放在另一个 div 中,背景图像的大小在 onResize 上发生变化,同时保持图像的纵横比(所以它看起来不会失真)。
不过我遇到了困难,因为如果我让自动调整文本大小起作用,我不会保持纵横比,如果我得到正确的纵横比,文本将不会调整大小。
得到了调整大小的文本,但是(如果你把蜜蜂压得太小)它会使图片倾斜而不是保持纵横比:http: //jsfiddle.net/JMVXA/11/
#parent{
width: 100%;
height: 100%;
position: relative;
background-image: url("Bee Image");
//padding-top: 81.799591002%;
background-size: 100% 100%;
}
如果我将 #parent 更改为此,纵横比有效,但文本不会适当调整大小:
#parent{
width: 100%;
position: relative;
background-image: url("Bee Image");
padding-top: 81.799591002%;
background-size: 100% 100%;
}
我知道问题的一部分。该插件要求 width() 和 height() 返回一个非零数字,但我的纵横比 CSS 未指定高度(使其返回高度 0)。所以我不知道从这里做什么。
关于如何做到这一点的任何想法?
我对 HTML、jQuery 和 CSS 很陌生,但我有其他语言的编程经验。
EDIT1
我希望文本 div 在图像中保持相同的相对大小和位置。就好像文本在图片本身内部(就定位和大小而言)。所以文字应该总是在蜜蜂的翅膀上。我想在调整大小时保持相同的纵横比。
EDIT2
更多信息:我正在制作一个网站,其中包含大图像,前面有一些文字。所以我希望能够指定将保存文本的 div 的尺寸和位置,并让我放在 div 中的任何文本都可以调整大小,以便它可以适合 div 的边界。