不幸的是，我有一个我无法解决的问题。我有一张图片，这要感谢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>
救援视口单位：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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句