Question

我是ruby的新手，最近安装了refile Gem来上传多张照片。我想以Carousel格式显示它们，所以我使用的是Bootstrap轮播。但是，当显示时，Photo不会填充旋转木马窗口并向左侧移动。这使得旋转木马窗口的其余部分留空，并且滚动箭头离开图片。这是它显示的方式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-->

任何帮助将不胜感激。此外，如果你有更好的方法来完成我想要做的事情，那将是非常棒的！

Answer 1

设置.profile .main-section .content {width: 60%}左右。因为您有不同宽度的照片，所以您希望为该容器使用width的值以适应各种照片宽度，从而合理地呈现它们。

您不希望该容器更改每张照片的尺寸，因为这会使控件（左右箭头）跳转到用户，这就是为什么制作旋转木马的人选择（正确）保留无论照片尺寸如何，.content div的尺寸都一致。

所以这里你的另一个选择就是裁剪你的照片，使它们的宽度都一样。我通常选择将照片裁剪为标准尺寸，因为当您将照片添加到旋转木马时，您可能会发现很难找到折衷的width值。

没有填充旋转木马区域的自举旋转木马中的图像

1 个答案: