CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
sireesha j
sireesha j

Reputation: 773

How to get responsive design for images?

I used bootstrap classes for designing my webpage.But image size and text size dragged while i minimizing the window.How to it?

<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;
}

Upvotes: 1

Views: 50

Answers (3)

Srijith
Srijith

Reputation: 1444

Remove the style: width: 17% from your img. img-responsive class from bootstrap should automatically take care of your image resizing. For the text part, as mentioned above, use % or media queries to define styles for different devices

Upvotes: 0

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

For your text I would suggest placing this in your body font-size:62.5%

Then instead of using 22px, use font-size:2.2rem;

This should help with the text. Now for you image try setting it's width in % Then it will scale nicely after resizing

Upvotes: 0

semuzaboi
semuzaboi

Reputation: 5172

If using bootstrap , you may find help here Response Images in Bootstrap

If text is getting distorted, i'd recommend checking your bootstrap classes.

Upvotes: 1

Related Questions