css - 如何删除 Bootstrap 面板中的图像空间

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%;，但这里的缺点是，如果增加到超出其自然尺寸，图像将开始模糊或像素化。