col-md-4 div 中的图像不是全宽答案

【问题标题】：image not full width in a col-md-4 divcol-md-4 div 中的图像不是全宽
【发布时间】：2016-08-18 18:17:11
【问题描述】：

我正在尝试在 col-md-4 div 中制作全宽图像。我已经尝试使用 img-responsive 类以及 width:100% 但它仍然无法正常工作。下面是我的html代码和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;}

【问题讨论】：

您可以添加您使用的框架和/或外部样式吗？
col-md-4 通常有一些 padding-left 对，这可能是宽度不适合容器的原因。还要仔细检查图像的大小，因为如果容器有 500px 并且图像小于 500，它不会填满整个容器（因为你设置了 max-width 而不是 width）
我使用了 padding: 0 !important;并且图像现在是全宽的。谢谢各位

标签： html css twitter-bootstrap

【解决方案1】：

您可以使用此 css 代码在 col-md-4 div 内使图像全宽。

 .smallImg img{width:100%}

【讨论】：

【解决方案2】：

<div class="col-md-4 smallImg">
    <img src="img/langtang.jpeg" class="img-responsive" alt="">
</div>

不要错过alt="" 以获得更好的练习。

CSS：

.smallImg img
{
    width:100%;
}

【讨论】：