Css 调整div中的文本大小调整img大小

不幸的是，我有一个我无法解决的问题。我有一张图片，由于css，它的大小取决于浏览器中打开窗口的大小。但我必须进入这个文本框。当您使用CSS将文本和文本框居中、调整浏览器窗口大小后，“我的文本”和“我的文本框”不会跟随“图像”，而是按照它们想要的方向移动时，就会出现问题。 为了更好地理解我的图像，我需要它显示在文本框和文本框的行中。但是，如前所述，当浏览器自动调整图像大小，同时相对于texbox文本和页边距放置在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>

我的文字

（不完美，只是为了给你一个想法）

因此，您的图像是100%宽的…
意味着我们需要清点你的“纸上线条”（真不敢相信我刚才这么做了！）
这将导致

~23

，并使用该值使用CSS3的

vw

（视口）单元调整文本大小：

100vw/23行=您的大约字体大小

<div id="text1">
    My text
</div>

---

要救援的视口单位：。对于较旧的浏览器，只需使用polyfill:

HTML:

---

这在逻辑上是因为你的文本（线宽）不随窗口调整大小。我发现这非常有用。谢谢你，博士。

#text1{ 
    position:absolute;
    background: url(imgtest.png) no-repeat center 0 / 100%;
    height:100%;
    width:100%;
    padding-top: 1.38vw;         /* used some here */
    padding-left: 2vw;
    font-size: calc(100vw / 22); /* But mostly here :) */
    line-height: 1.145em;        
}

<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>

.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;
}