CODEWITHSUNDEEP
csstwitter-bootstrapsass
Dev
Dev

Reputation: 467

How to make inline images responsive in smaller screens

I'm looping through some images in my rails app"

<% @attachments.each do |attachment| %>
  <div class="img-thumbnail" style="display:inline-block; margin:auto; text-align: center; padding-top: 15px; width: 120px;">
    <%=image_tag attachment.images_url(:thumb).to_s %>
      <div class="desc">
        <%= link_to "Remove", remove_image_path(attachment), data: { confirm: "Are you sure you want to delete this image?" }, :method => :delete, :style => "text-decoration: none !important" %>
      </div>
  </div>
<% end %>

The images appear inline and they start from the left side which is exactly what I wanted. Now I'm wondering if there is a way I can make the image take up the 100% width only when the screen is smaller?

I created a dummy snippet for help.

.form-border {
  padding-bottom: 20px;
  padding-top: 20px;
  border: 1px solid lightgrey;
  border-radius: 8px;
  background-color: white;

}

div.desc {
  padding: 15px;
  text-align: center;
}
<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="container form-border">
        <div class="img-thumbnail" style="display:inline-block; margin:auto; text-align: center; padding-top: 15px; width: 120px;">
          <img src="pic_trulli.jpg" alt="Italian Trulli">
          <div class="desc">Remove</div>
          <img src="pic_trulli.jpg" alt="Italian Trulli">
          <div class="desc">Remove</div
        </div>
      </div>
    </div>
  </div>
</div>

Update A

I followed @agustin answer by doing the doing:

<div class="img-thumbnail" style="display:inline-block; margin:auto; text-align: center; padding-top: 15px; width: 120px;">
  <div class="img-fluid">
    <%=image_tag attachment.images_url(:thumb).to_s %>
 </div>
</div

or

<div class="img-thumbnail" style="display:inline-block; margin:auto; text-align: center; padding-top: 15px; max-width: 100%;;">
  <div class="img-fluid">
    <%=image_tag attachment.images_url(:thumb).to_s %>
  </div>
 </div

but I still get the same result:

enter image description here

Upvotes: 0

Views: 48

Answers (1)

agustin
agustin

Reputation: 2387

You have errors in your layout.

  1. Remember that you shouldn't create another .container element inside a col or row element. The correct way is .container > .row> .col, and if you want columns inside a column, then you have to create another .row with .cols inside, but not another container.
  2. The img-fluid class has to be applied to the img element. You will probably want to define the width of the image though.

Check the following snippet. I created two columns with the class col-md-6, which means that, on medium screens (≥768px), those columns will take 50% of the width of the row each. As I didn't define any class with col-sm or col-xs, those columns will take 100% of the width of the row on small screens.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="row">
        <div class="col-md-6">
          <div class="img-thumbnail">
            <img src="https://placehold.it/400x300/" class="img-fluid" alt="Italian Trulli">
            <div class="desc">Remove</div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="img-thumbnail">
            <img src="https://placehold.it/400x300/" class="img-fluid" alt="Italian Trulli">
            <div class="desc">Remove</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions