如何删除引导程序面板中的图像空间

Question

我搜索并尝试了很多时间，但徒劳无功 我的图像比图像宽度占用更多的空间。 当我检查网站上的图像时，它似乎在宽度上需要比图像宽度更多的空间......（似乎它是边距）但是当我尝试在CSS中删除它时将边距设置为零但仍然是相同

这是我的索引代码：

<% else %>
<%= render 'form' %>
<div class="row">
    <% @posts.each do |post| %>
        <div class="col-md-3">
            <div class="panel panel-default">
              <div class="panel-body">
                    <p><%= post.description %></p>
                    <%= image_tag(post.image.url(:large), class: "img-responsive" ) %><br/>
                    <% if post.user == current_user %>
                        <div><%= link_to "Edit", edit_post_path(post) %> | <%= link_to "delete", post, method: :delet, data: {confirm: "Are you sure?"} %> </div><br/>
                    <% end %>
              </div>
            </div>
        </div>
    <% end %>
</div>

这是我的问题的图像：

<blockquote class="imgur-embed-pub" lang="en" data-id="a/i0TI9">
    <a href="//imgur.com/i0TI9"></a>
</blockquote>
<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

Answer 1

您必须将img宽度设为100%并制作overflow:hidden

这对你肯定有帮助。

Answer 2

Bootstrap中的.img-responsive类只会阻止图像以较小的尺寸溢出容器 - 它不能确保较小的图像扩展以填充其容器。

您有两种选择：

1. 使用较大的图像 - 足够大以确保图像始终填充其容器（使用Bootstrap的网格轻松实现）。

2. 将图像设置为width: 100%;，但这里的缺点是如果图像增加超出其自然尺寸，图像将开始模糊或像素化。