圖像在自舉傳送帶不填充傳送帶區域

我是一種新的紅寶石，最近安裝了重複寶石上傳多張照片。我想以Carousel格式顯示它們，所以我使用Bootstrap旋轉木馬。但是，顯示時，照片不會填滿轉盤窗口並粘在左側。這將剩下的轉盤窗口留下空白，並且滾動箭頭不在圖片上。這是它顯示https://www.shyftworks.com/ambassadors/elise-craig我不知道該怎麼做的方式。這裏也是小提琴https://jsfiddle.net/farquhar86/3vy2547f/ 這是我的節目頁面代碼：圖像在自舉傳送帶不填充傳送帶區域

<!-- Wrapper for slides --> 
<div class="carousel-inner"> 
    <% @ambassador.images.each_with_index do |image, index| %> 
    <div class="item <%= 'active' if index == 0%>" data-slide-number="<%= index %>"> 
     <%=attachment_image_tag(image, :file, :fill, 600, 600, class: 'img-responsive') %> 
    </div> 
    <% end%> 
</div> 
<!-- Controls --> 
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
</a> 
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
</a> 
</div> 
<!-- end of carousel-->

任何幫助，將不勝感激。此外，如果你有更好的方式來完成我想要做的事情，那就太棒了！

來源

2015-09-25 Bradley Farquhar

這還不夠。你能解決你的問題嗎？或者指向某人可以幫助您調試的現場演示？你需要包括引導程序，所以也許這樣的起點會有所幫助：https://jsfiddle.net/DTcHh/ – jmargolisvt

這是活的網站。希望這有助於：https://www.shyftworks.com/ambassadors/elise-craig –

這裏是HTML和CSS的小提琴。我希望我做對了。 https://jsfiddle.net/farquhar86/3vy2547f/ –

設置.profile .main-section .content {width: 60%}左右。由於您擁有不同寬度的照片，因此您希望爲該容器使用width的值，以適應不同的照片寬度，以便合理地保持一致。

你不想讓容器改變每張照片的尺寸，因爲這會讓控件（左右箭頭）跳躍給用戶，這就是爲什麼製作旋轉木馬的人選擇（正確）保留無論照片大小如何，.content div的尺寸都一致。

因此，您的其他選項是剪裁您的照片，使它們都是相同的寬度。我通常會選擇將我的照片裁剪到標準化的尺寸，因爲當您將照片添加到旋轉木馬時，您可能會發現妥協width值很難找到。

來源

2015-09-26 14:58:31 jmargolisvt

圖像在自舉傳送帶不填充傳送帶區域

回答

相關問題