如何刪除引導面板中的圖像空間

我搜索並嘗試了很多時間，但徒勞我的圖像需要比圖像寬度更多的空間。當我檢查網站上的圖像時，它似乎需要更多的空間寬度比圖像寬度...（它似乎是邊距），但是當我嘗試刪除它在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>

來源

2016-07-22 sam0101

我們可以看到你的CSS代碼 – nmnsud

它與寬度：100％的回答如下suggets ...感謝ü反正 – sam0101

你必須讓img寬度100%並overflow:hidden

這將幫助你肯定。

來源

2016-07-22 18:12:13

謝謝...現在是工作，但爲什麼我們需要添加溢出：隱藏;在這裏??它似乎工作沒有添加它 – sam0101

作爲.img響應類在bootstrap做你的工作。 –

謝謝...得到它 – sam0101

Bootstrap中的.img-responsive類只會防止圖像以較小的尺寸溢出它們的容器 - 它不能確保較小的圖像擴大以填充它們的容器。

你有兩個選擇：

使用較大的圖像 - 足夠大，以確保圖像始終填滿它的容器（有引導的網格容易實現）。
將圖像設置爲width: 100%;，雖然這裏的缺點是如果圖像增加超出其自然尺寸，圖像將開始模糊或像素化。

來源

2016-07-22 18:19:12 Toby

是的，當添加寬度：100％正常工作...謝謝 – sam0101

如何刪除引導面板中的圖像空間

回答

相關問題