Html 引导媒体对象映像大小调整

我在使用引导的网格布局中的图像有问题。我试图复制主页的中间部分作为练习

我的图像将向左拉，高度保持固定在150px，宽度被切断，因此图像看起来很瘦，不是很好。我检查了其他网站的代码，他们不知何故有一个150x150的图像，在md网格布局中是130X130，在小网格布局中是108x108。我怎样才能做到这一点

我猜130是med容器在指定sm-5网格选择时的默认宽度。这就是为什么他们选择这样调整大小，对吗？尽管我尽了最大的努力，我还是无法复制这一点。这是我的密码

<div class="row index-row">


    <div class="col-sm-4 index-left">
      <div class="media-background">

        <div class="row index-row">
          <div class="media col-sm-5 col-md-4">
            <div class="image-overlay">
              <a class="btn btn-default href="#">Open</a>
              <%= image_tag('computer.jpg', class: 'pull-left media-img', alt: 'About') %>

            </div>
          </div>
            <div class="media-body col-sm-7 col-md-8">
              <h4>
                <%= link_to 'About', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              "ABOUT What is Riot Design, our our clients and our specialties."
            </p>
            </div>
          </div>

      </div>
    </div>




      <div class="col-sm-4 index-middle">
        <div class="media-background">

          <div class="row index-row">
          <div class="media col-sm-5 col-md-4">
            <a class="pull-left" href="">
              <%= image_tag('notebook.jpg', class: 'media-img', alt: 'Portfolio') %>
            </a>
          </div>
            <div class="media-body col-sm-7 col-md-8">
              <h4>
                <%= link_to 'Portfolio', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              PORTFOLIO Web design, app design, print works and photography
            </p>
            </div>
          </div>

        </div>
      </div>


      <div class="col-sm-4 index-right">
        <div class="media-background">

         <div class="row index-row">
          <div class="media col-sm-5 col-md-4">
            <a class="pull-left" href="">
              <%= image_tag('building.jpg', class: 'media-img', alt: 'Contacts', type: 'button') %>
            </a>
          </div>
            <div class="media-body col-sm-7 col-md-8">
              <h4>
                <%= link_to 'Contacts', root_path, class: 'media-heading' %>
              </h4>
            <p class="heading-text">
              Where to find the 
              <strong>Creatives</strong> 
              contact module and more.
            </p>
            </div>
          </div>

        </div>
      </div>



    </div>

</div>

“关于什么是暴动设计，我们的客户和我们的专业。”


组合网页设计、应用程序设计、印刷作品和摄影


在哪里可以找到
有创造力的人
联系模块和更多。

要实现这一点，首先必须更正html代码，因为它与您提到的网站中的代码不同。将您的html代码替换为以下代码：

<div class="row index-row">

    <div class="col-sm-4">
        <div class="media">
            <div class="row ">
                <div class="media-img  pull-left  col-sm-5  col-md-4 ">
                    <div class="img-overlay "> 
                        <a class="btn  btn-primary  animated fadeInUp " href="/en/about/" rel="bookmark">Open</a> 
                    </div>

                    <%= image_tag('computer.jpg', class: 'pull-left media-img', alt: 'About') %>
                </div>

                <div class="media-body   col-sm-7 col-md-8  ">
                    <h4 class="media-heading"> <%= link_to 'About', root_path, class: 'media-heading' %></h4>
                    <p class="hidden-sm">"ABOUT What is Riot Design, our our clients and our specialties."</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="media">
            <div class="row ">
                <div class="media-img pull-left   col-sm-5 col-md-4 ">
                    <div class="img-overlay  "> 
                        <a class="btn  btn-primary  animated fadeInUp needsclick" href="/en/portfolio/" rel="bookmark">Open</a> 
                    </div>

                    <%= image_tag('notebook.jpg', class: 'media-img', alt: 'Portfolio') %>
                </div>
                <div class="media-body   col-sm-7  col-md-8 ">
                    <h4 class="media-heading"> <%= link_to 'Portfolio', root_path, class: 'media-heading' %></h4>
                    <p class="hidden-sm">PORTFOLIO Web design, app design, print works and photography</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="media">
            <div class="row ">
                <div class="media-img  pull-left   col-sm-5 col-md-4 ">
                    <div class="img-overlay "> 
                        <a class="btn  btn-primary  animated fadeInUp needsclick" href="/en/contacts/" rel="bookmark">Open</a> 
                    </div>

                    <%= image_tag('building.jpg', class: 'media-img', alt: 'Contacts', type: 'button') %>                                        
                </div>

                <div class="media-body  col-sm-7 col-md-8 ">
                    <h4 class="media-heading"><%= link_to 'Contacts', root_path, class: 'media-heading' %></h4>
                    <p class="hidden-sm">Where to find the <strong>Creatives</strong> contact module and more.</p>
                </div>
            </div>
        </div>
    </div>

</div>

---

我的回答对你有帮助吗？我试着用你的答案，但我没法用。好的。我将用相同的代码放一个JSFIDLE示例，让您看看它是否有效。我可以给你看我已经做过的代码，但是我不能把它插入到你的文件中，这取决于你。好的，我会在这周内回到这个项目，试着找出答案。如果你能提供JSFIDLE，那就太好了。在你的帮助下，经过一些尝试和错误后，我成功地实现了这一点，现在我正在尝试获得图像上按钮的淡入效果。你知道怎么做吗？可能是的，但我们不能在这个问题上讨论这个问题。最好的办法是提出另一个问题，并至少张贴您尝试过的内容，我也可以帮助您。

.media-img {
    overflow: hidden;
    padding: 0;
    position: relative;
}

.media-img .img-overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
    height: 100%;
    opacity: 0;
    padding-top: 50%;
    position: absolute;
    text-align: center;
    transition: opacity 0.3s ease-out 0s;
    visibility: hidden;
    width: 100%;
    z-index: 4;
}

.media div.media-img img {
    height: auto;
    transform: scale(1, 1);
    transition-duration: 2000ms;
    transition-timing-function: ease-out;
    width: 100%;
}

img {
    vertical-align: middle;
}

.media-img img {
    width: 100%;
}

.media div.pull-left {
    margin-left: 14px;
    margin-right: -15px;
    overflow: hidden;
}