调整div中的文本大小
提问于 2014-07-18 16:20:45
不幸的是，我有一个我无法解决的问题。我有一个图片，这要感谢css调整大小取决于打开窗口的大小在你的浏览器。但我必须输入这个文本和文本框。当你用CSS对文本和文本框进行居中，调整浏览器窗口的大小后，我的文本和我的文本框就不会跟随“图像”，但它们会去他们想去的地方。为了更好地理解，我的图像看起来如下：http://i41.tinypic.com/27xe6nm.jpg和我需要将它显示在文本和文本框的行中。但是，如前所述，当浏览器自动调整图像大小时，当放置在div上时，相对于文本框文本和边距-顶部: 10%；边距-底部: 70%；等等。文字超出了字里行间。
我的CSS
#text1
{
position:absolute;
height: auto;
margin-left:40%;
margin-right:auto;
margin-top:-35%;
margin-bottom:auto;
width: auto\9;
}
div.imgg img
{
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}我的HTML
<div class="imgg">
<img src="imgtest.png"/>
<div id="text1">
my text
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-18 17:04:34
视图单元到救援：http://jsfiddle.net/X6yJB/。而且，对于较旧的浏览器，只需使用一个多边形填充：http://html5polyfill.com/。
HTML：
<div class="imgg">
<img src="http://i41.tinypic.com/27xe6nm.jpg"/>
<div id="text1">
This example uses viewport units. This family
of measures includes vh, vw, vmin, and vmax. Because
the size of your image is affected by the width, the vw
units are used. Specifically, 1vw is 1% of the viewport
width. As viewport changes, so does your font-size.
Neat, huh?!
</div>
</div>CSS：
.imgg {
position: relative;
}
.imgg > div {
position:absolute;
top: 2.5vw;
font: normal 2vw/2.5 Sans-Serif;
}
.imgg > img {
max-width: 100%;
width: auto\9;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24835501
复制相关文章
腾讯云开发者
