How to make inline images responsive in smaller screens - css

Question

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:

Answer 1

You have errors in your layout.
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.
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>