css - 调整 div 中的文本大小调整 img

Question

不幸的是，我有一个我无法解决的问题。我有一张图片，这要归功于 css 根据浏览器中打开的窗口的大小调整大小。但我必须进入这个文本和文本框。当您使用 CSS 将文本和文本框居中、调整浏览器窗口大小时，我的文本和文本框不遵循“图像”，但它们会移动到他们想要的位置，问题就来了。为了让我更好地理解我的形象看起来像这样:http://i41.tinypic.com/27xe6nm.jpg我需要将其显示在文本和文本框的行内。但是，如前所述，当浏览器自动调整图像大小时，同时将 div 放置在相对于 texbox 文本和 margin-top: 10%; margin 底部: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>

Answer 1

视口(viewport)单元来拯救:http://jsfiddle.net/X6yJB/ .而且，对于旧版浏览器，只需使用 polyfill: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;
}