Question

不幸的是我遇到了一个我无法解决的问题。我有一张图片，这要归功于css的大小调整，具体取决于浏览器中打开窗口的大小。但我必须进入这个文本和文本框。当您使用CSS将文本和文本框置于中心之后，调整浏览器窗口大小，我的文本和文本框不会跟随“图像”，但它们会移动到他们想要的位置。让我更好地理解我的图像如下所示：http://i41.tinypic.com/27xe6nm.jpg我需要将其显示在文本和文本框的行内。但是，如前所述，当浏览器自动调整图像大小时，相对于texbox文本和margin-top放置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>

Answer 1

拯救的视口单位：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;
}

Answer 2

jsBin demo ^{（不完美，只是为了让您了解）}

所以你的形象是100％宽...... 意味着我们需要计算你的纸线＆＃34; （不能相信我刚刚那样做了！）
会产生 ~23 并使用该值来使用CSS3的vw（视口）单元调整文本大小：

100vw / 23 lines = your approx. font size

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

#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调整大小图像中的文本大小

2 个答案: