Question

我无法将文字与图像一起调整大小。我尝试干涉高度％等，但它不起作用。

编辑：我编辑了我的CSS以包含@media only screen and (max-width: 480px) but the text disappears when I resize the browser.任何人都可以帮忙吗？

<div class="container-fluid">
    <div class="row feature">
        <img alt="Women Digital Nomads" class="img-responsive" src="images/Homepage%20Banner.jpg">
        <div class="feature-text col-xs-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
            <p>Masthead</p>
        </div>
    </div>
</div>

CSS

.feature-text {
    position: absolute;
    top:0;
    bottom: 0;
    font-size: 0;
    overflow: hidden;
}

.feature-text:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.feature-text p {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    color: white;
    font-size: 40px;
    font-weight: bold;
    padding: 3%;
    line-height: 50px;
}

@media only screen and (max-width: 480px) {

   .feature-text p { 
       font-size: 1em; 
    }

}

Answer 1

例如，您可以更改

font-size：40px;到font-size：2.500em;

还有一个在线转换器可以检查em-s中的像素

http://pxtoem.com/

图像上的响应文本不起作用

1 个答案: