Question

我正在创建一个带有页面的Rails应用程序，该页面包含覆盖整个可见背景但没有间距的记录封面图片。我允许用户上传他们自己的图像，我想确保这些图像在显示时精确调整为1：1的比例。如果不是，则瓷砖图案会分开并留下间隙。要做到这一点，我想调整图片在里面的bootstrap col的大小。我试图用JQuery做这件事，但收效甚微。这可以用JQuery完成吗？还有另外一种方法吗？这就是我所拥有的。

这是我的页面：

SelectedItem

这是我的JQuery（这是错误的）：

<div class="row">
  <% @albums.each do |album| %>
  <a href="/albums/<%= album.id %>">
    <div class="col-lg-3 col-sm-4 col-xs-6 index_container embed-responsive-1by1">
      <% if album.cover.blank? %>
        <p><%= album.title %></p>
        <p><%= album.artist %></p>
        <p><%= album.year %></p>
        <%= link_to "Show", album_path(album), class: 'grey' %>
        <%= link_to "Edit", edit_album_path(album), class: 'grey' %>
        <%= link_to "Destroy", album_path(album), method: :delete, data: {confirm: "Are you sure?"}, class: 'grey' %>
      <% else %> 
        <%= image_tag album.cover, class: 'index_image' %>
      <% end %>
    </div>
    </a>
  <% end %>
</tbody>
</table>
<br>
</div>
<style>

Answer 1

在没有看到你的CSS的情况下，我想象你必须做的事情：

.index_container {
width: 50px; /*or any width you like, but it must be defined*/
height: 50px; /*or any height you like */
background-size: cover /*very important as it covers the element within the defined widthxheight*/;
background-repeat: no-repeat;
background-position: 50% 50%;
}

瞧 - 不需要JQuery。

将Bootstrap cols设置为1：1的高度和宽度比例

1 个答案: