Question

我使用bootstrap类来设计我的网页。但是在我最小化窗口时拖动图像大小和文本大小。怎么样？

<div class="col-sm-3  col-md-3">
<div class="panel panel-success" style="height:200px;">
<div class="panel-heading"><b>TIMESHEET</b></div>
        <div class="panel-body">
    <a href="@routes.Timesheets.showSelectPage()"><img src="@routes.Assets.at("images/tabImages/timesheet.png")" class="img-responsive center-block" alt="Image" style="width:17%;"><p class="text-muted">Timesheet Processing</p>
    </a>
     </div>
 </div>

的CSS：

.panel-success{
height:220px;
}
.panel-heading{
text-align:center;
font-size:22px;
padding:5px 0px 5px 0px;
}
.center-block{
 width:45%;
}
.panel-warning{
 height:200px;
}

Answer 1

如果使用bootstrap，您可以在Response Images in Bootstrap

找到帮助

如果文本变形，我建议您检查引导类。

Answer 2

对于您的文字，我建议将其放入您的身体npm run build --silent

然后使用font-size:62.5%

而不是使用22px

这应该有助于文本。现在为你的图像尝试在font-size:2.2rem;设置它的宽度然后它会在调整大小后很好地缩放

Answer 3

从img中删除样式：宽度：17％。来自bootstrap的img-responsive类应自动处理图像大小调整。对于文本部分，如上所述，使用％或媒体查询来定义不同设备的样式

如何获得图像的响应式设计？

3 个答案: