Question

我正在遍历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

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

Answer 1

您的布局有误。

请记住，您不应在.container或col元素内创建另一个row元素。正确的方法是.container> .row> .col，如果要在列中添加列，则必须创建另一个.row，其中包含.col ，而不是其他容器。
必须将img-fluid类应用于img元素。不过，您可能需要定义图像的宽度。

检查以下代码段。我使用类col-md-6创建了两列，这意味着在中等屏幕（≥768px）上，这些列将占用行宽的50％。由于我没有使用col-sm或col-xs定义任何类，因此这些列将占用小屏幕上行宽度的100％。

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

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

1 个答案: