javascript - 流体图像翻转 Twitter Bootstrap Rails

Question

我已经开始为我正在处理的 Rails 应用程序创建翻转图像效果。我正在使用 twitter-bootstrap-rails gem 来使应用程序在各种设备上看起来都很好。我当前实现的问题是，当调整浏览器大小时，图像不再调整为浏览器的宽度，并且翻转效果会超出图像的边界。我认为问题源于 .photo 类，但我不确定如何解决它或者是否有更好的方法来实现我想要的结果？

HTML

<% @photos.each do |photo| %>
<div class="photo row">
  <div class="span8 photo"><%= image_tag photo.image_url(:large).to_s %></div>
  <div class="span4 hover">
    <div class="bg"></div>
    <div class="description">
      <h4><%= link_to photo.title, photo_path(photo) %></h4>
      <hr>
      <p><%= raw photo.tag_list.map { |t| link_to t, tag_path(t)}.join(' ') %></p>
    </div>
  </div>
</div>
<% end %>

CSS:

 .photo {
    position: relative;
    width: 770px;
  }

  .photo .hover {
    position: absolute;;
    height: 90.4%;
    left: 3.09%;
    top: 4.8%;
    width: 93.82%;
    display: none;
  }

  .photo .hover .bg {
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 100%;
    background: #FFF;
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    filter:alpha(opacity=80);
    opacity: 0.8;
  }

  .photo .hover .description {
    position: relative;
    text-align: center;
    top: 40%;
    z-index: 2;
  }

JS

jQuery(document).ready(function($) {


  $(".photo").mouseenter(function () {
      $(this).find('.hover').fadeIn(300);
  }).mouseleave(function (){ 
    $(this).find('.hover').stop(true, true).fadeOut(300);
  });

}); /* End Dom Ready */

Answer 1

Bootstrap 使用媒体查询来调整 span8 的大小。因此，我们需要重新排列 html 以将悬停元素包含在 span8 中，然后使用百分比作为尺寸以保持相对于照片的纵横比。

HTML

<% @photos.each do |photo| %>
<div class="row">
  <div class="span8 photo">
    <%= image_tag photo.image_url.to_s %>
    <div class="hover">
      <div class="bg"></div>
      <div class="description">
        <h4><%= link_to photo.title, photo_path(photo) %></h4>
        <hr>
        <p><%= raw photo.tag_list.map { |t| link_to t, tag_path(t)}.join(' ') %></p>
      </div>
    </div>
  </div> 
</div>
<% end %>

CSS

.photo {
  position: relative;
}

.photo .hover {
  position: absolute;
  height: 90%;
  width: 94%;
  top: 0;
  left: 0;
  padding: 3%;
  display: none;
}

.photo .hover .bg {
  z-index: 1;
  position: relative;
  height: 100%;
  width: 100%;
  background: #FFF;
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
  opacity: 0.8;
}

.photo .hover .description {
  position: absolute;
  text-align: center;
  top: 40%;
  width: 94%;
  height: 90%;
  z-index: 2;
}