如何在较小的屏幕上响应嵌入式图像

我正在Rails应用中浏览一些图像”

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

图像显示为内联，它们从左侧开始，这正是我想要的。现在，我想知道是否有一种方法可以使图像仅在屏幕较小时才占据100％的宽度？

我创建了一个虚拟片段以获取帮助。

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

更新A

我遵循@agustin的回答进行操作：

<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

要么

<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

但我仍然得到相同的结果：