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

Question

我无法让文本随图像一起调整大小。我尝试干预高度 % 等，但它不起作用。

编辑:我已经编辑了我的 CSS 以包含 @media only screen 和(最大宽度:480px)，但是当我调整浏览器大小时文本消失了。有人可以帮忙吗？

<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

例如你可以改变

字体大小:40px；字体大小:2.500em；

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

http://pxtoem.com/