Bootstrap Thumbnail & Caption 类的响应式 CSS

Posted 2023-03-29

【中文标题】Bootstrap Thumbnail & Caption 类的响应式 CSS

【英文标题】：Responsive CSS for Bootstrap Thumbnail & Caption classes

【发布时间】：2014-10-19 00:04:51

【问题描述】：

我正在将 Rails、Bootstrap 和 Imagemagick 用于市场应用程序。

我有一个缩略图网格，其中上传的图像具有不同的纵横比。图像由 imagemagick 调整为缩略图以适应 200x200 的空间。

这是我使用引导类获得的屏幕截图。

如何让标题一致且响应迅速地对齐 - 我希望每个产品的产品标题的第一行位于同一行中，并且缩略图框的大小都相同，即图像的一部分居中缩略图框，然后是下方的标题。

这是我的 html.erb：

<div class="center">
  <div class="row">
    <% @listings.each do |listing| %>
    <div class="col-md-3 col-xs-6">
      <div class="thumbnail" > 
         <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive aspect"), listing %>
            <div class="caption">
              <h3><%= listing.name %></h3>
              <p><%= number_to_currency(listing.price) %></p>
            </div>
      </div>
    </div>
  </div>
</div>

这是我的 CSS：

.caption 

  h3 
  font-size: 17px;
  margin: 2px;
  

  p 
  font-size: 15px;
  margin: 0px;
  

我尝试使用固定像素容器，但它们没有响应。

【问题讨论】：

图像由 imagemagick 调整为缩略图以适应 200x200 的空间。我不太明白为什么他们的身高不同？

我正在使用 imagemagick 的 HxW 调整大小选项，即 200x200。但这会将高度或宽度调整为最大 200。因此，如果我有一个 500X600 的图像，它会调整为 167x200，这会导致标题错位。我可以使用另一个 imagemagick 选项吗？这将是一个快速的解决方案。

【参考方案1】：

将标题和缩略图分别封装到一个 div（图标）中。使用 margin-right 和 margin-left 自动居中。如果它们与 inline-block 对齐，您可能必须在缩略图和标题 div 之间放置一个 br。

<div class="center">
    <div class="row">
    <% @listings.each do |listing| %>
        <div class="col-md-3 col-xs-6">
            <div class="icon">
                <div class="thumbnail" > 
                    <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive aspect"), listing %>
                </div>
                <div class="caption">
                    <h3><%= listing.name %></h3>
                    <p><%= number_to_currency(listing.price) %></p>
                </div>
            </div>
        </div>
    <% end %>
    </div>
</div>

.thumnbnail 
    display: inline-block;
    margin-left: auto;
    margin-right: auto;


.caption 
    display: inline-block;
    margin-left: auto;
    margin-right: auto;


.caption p 
  font-size: 15px;
  margin: 0px;


.caption h3 
  font-size: 17px;
  margin: 2px;

【讨论】：

你没有在你的css中使用“icon”？