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