文章/答案/技术大牛

发布

问调整div中的文本大小
EN

Stack Overflow用户

提问于 2014-07-19 00:20:45

回答 1查看 3K关注 0票数 1

不幸的是，我有一个我无法解决的问题。我有一个图片，这要感谢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>

css

image

text

resize

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-19 01: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;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24835501

复制

相似问题

问调整div中的文本大小
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整div中的文本大小EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整div中的文本大小
EN