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

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

如果文本变得失真，我建议您检查您的 Bootstrap 类。