cela cela - 4 years ago 131
CSS Question

image not full width in a col-md-4 div

i am trying to make an image full width in col-md-4 div. I've tried using the img-responsive class as well as width:100% but still it is not working. below is my html code and css

HTML



<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 travelinfo">

<h3>travel info</h3>
<div class="col-md-4 smallImg">
<img src="img/pokhara.jpeg" class="img-responsive">
</div>
<div class="col-md-8 NewsInfo">
<a href="">The six best trekking routes </a>
<p> March 22,2012</p>
</div><div class="clear-fix"></div><br>



<div class="col-md-4 smallImg">
<img src="img/illam.jpeg" class="img-responsive">
</div>
<div class="col-md-8 NewsInfo">
<a href="">amazing places </a>
<p>may 30,2011</p>
</div><div class="clear-fix"></div><br>


<div class="col-md-4 smallImg">
<img src="img/langtang.jpeg" class="img-responsive">
</div>
<div class="col-md-8 NewsInfo">
<a href="">amazing langtang and gosaikund</a>
<p>april 2015</p>
</div><div class="clear-fix"></div>

</div>


CSS



.travelinfo .smallImg img{margin-top:25px;float: left;max-width: 100%;vertical-align: middle;}
.NewsInfo{float: right;line-height: 15px;margin-top: 20px;}

.NewsInfo a{font-family: 'Open Sans', sans-serif; font-size: 13px;color:#fff; text-transform:uppercase;font-weight: 400;}
.NewsInfo p{font-family: 'Open Sans', sans-serif; font-size: 13px;color:#ff590b; text-transform:uppercase;}

Answer Source

You can use this css code to make image full width within a col-md-4 div.

 .smallImg img{width:100%}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download