Ali Zia Ali Zia - 6 months ago 19
CSS Question

Image not scaling smaller as the resolution decreases

I am using bootstrap. This is my code.

HTML

<div class="choose1 hidden-xl hidden-lg hidden-md hidden-sm">
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12">

<table width="100%">
<tr>
<td align="center" style="padding:5px;"><a href="#"><img src="img/app_store.png" alt="" style="height:auto; width:220px;" /></a></td>
</tr>
<tr>
<td align="center" style="padding:5px;"><a href="#" ><img src="img/google_play.png" alt="" style="height:auto; width:220px;" /></a></td>
</tr>
<tr>
<td align="center" style="padding:5px;"><a href="#" ><img src="img/amazon.png" alt="" style="height:auto; width:220px;" /></a></td>
</tr>
</table>

</div>
</div>
</div>
</div>


And CSS:

.choose1 {
background: url('img/slides/1mobile.png') top center no-repeat;
height: 320px;
border: 1px solid red;
}


When I check the image on small screen, the banner does becomes small, instead it slips out of the div. Please check the live site here on small screen. WHat should I do so that the image transforms as much as the div is.

Answer

Try This:

.choose1 {
background: url('img/slides/1mobile.png') top center no-repeat;
border: 1px solid red;
background-size: 100% auto;
}