Question

HTML

<div class="tag">TEXT<br> <a href="#bottom"class="icons glyphicon glyphicon-circle-arrow-down"></a></div>
<img src="images/flower.jpg" class ="img-responsive" style="margin:0px; padding:0px;">

CSS

.tag {
    float: left;
    position: absolute;
    left: 0px;
    top: 50px;
    z-index: 1000;
    width:100%;
    height:500px;
    max-width:100%;
    text-align:center;
    padding: 5px;
    color: #FFFFFF;
    font-weight: bold;
    text-shadow: 2px 2px #222222;
    font-size:75px;
}

当我将页面大小调整为移动尺寸时，图片顶部的文字也不会调整大小，而是覆盖网页的其余部分。

示例：JSFIDDLE

^当您将窗口拖得更小时，文本会与正文文本重叠。

Answer 1

你甚至没有定位img，你应该使用，

img { width: 100% }

将文本放在p标签或h3标签中，

h3 { font-size: 1em} // or 1rem

Answer 2

您可以使用媒体查询在较小的屏幕上更改字体大小

@media only screen and (min-width: 768px) {
  .tag {
     font-size: 20px;
   }
}

希望它有所帮助。

HTML5 Bootstrap - 将文本保存在图像中的div中

2 个答案: