如何在引导面板中删除图像空间

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

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

你有两个选择：

1. 使用更大的图像 - 足够大以确保图像始终填满它的容器（使用 Bootstrap 的网格很容易实现）。

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

Answer 2

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

这肯定会对你有所帮助。