Bootstrap Media Object Images resizing

Question

I am having a problem with my images in my grid layout with Bootstrap. I am trying to replicate the middle section of the home page of http://riotdesign.eu/en/ as an exercise.

My images will pull left and the height remains fixed at 150px and the width gets cut off so the image looks skinny and not very good. I inspected the other websites code and they somehow have a 150x150 image that is 130X130 in md grid layouts and 108x108 in small grid layout. How can I achieve this?

I am guessing that 130 is the default width for the med container at their specified sm-5 grid selection. so that is why they chose to resize that way, is that correct? I have not been able to replicate this despite my best efforts. Here is my code.

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

Solution

To achieve that you first have to correct you html code because it's not like the one from the website you mentioned. Replace your html code with this one:

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

And also add this to your css file and the pictures should look like you want:

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

Comments

[user3408293]

After some trial and error thanks to your help I got this to work, now I am trying to get the fade-in effect of the buttons over the images. Do you know how to do this?

[paulalexandru]

Probably yes but we can't discuss about that on this question. Best way is to create another question and post at least what you tried, and i could help you with that also.