Bootstrap媒体对象图像调整大小

Question

我在使用Bootstrap的网格布局中遇到了图像问题。我正在尝试复制http://riotdesign.eu/en/主页的中间部分作为练习。

我的图像会向左拉，高度固定在150px，宽度被截断，所以图像看起来很瘦，不是很好。我检查了其他网站的代码，他们不知何故有一个150x150的图像，在多维网格布局中是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>

Answer 1

要实现这一点，你首先必须纠正你的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>

并将其添加到您的css文件中，图片应该看起来像您想要的：

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