Bootstrap 媒体对象图片调整大小

Question

Bootstrap 媒体对象图片调整大小

htmlcssrubytwitter-bootstraptwitter-bootstrap-3

3

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

我的图片会向左拉，并且高度保持在150像素，宽度被裁剪，导致图片看起来很瘦，不太好看。我检查了其他网站的代码，他们以某种方式拥有一个大小为150x150的图片，在md网格布局中为130X130，在小型网格布局中为108x108。我该如何做到这一点？

我猜测130是他们指定的sm-5网格选择中med容器的默认宽度。所以他们选择以这种方式进行调整，这样正确吗？尽管我尽了最大努力，但我仍然无法复制它。以下是我的代码：

<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>

- user3408293

我的回答对你有帮助吗？ - paulalexandru

我尝试使用你的答案，但是无法使其工作。 - user3408293

好的。我会放一个 jsfiddle 的例子，让你看到它是可以工作的。我可以向你展示我已经完成的代码，但我无法将其插入到你的文件中，这取决于你。 - paulalexandru

好的，我这周会回到这个项目上来尝试解决问题。如果您能提供那个jsfiddle，那就太好了。 - user3408293

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- paulalexandru · Accepted Answer

为了实现这一点，您首先需要更正您的HTML代码，因为它与您提到的网站不一样。请用以下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;
}