Question

所以，我正在尝试使用百分比在我的屏幕中间制作一个照片库，图像最终在中心，并且使用jquery正常运行以更改图像，没有问题，但图像div最终覆盖包含图库名称的div，如何使用百分比修复图库div？

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
    position:relative;
    width: 52%;
    height: 69%;
}

.photoset img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}

<div class="row">
 <div class="col-md-4 col-md-offset-4 text-center">
    Photoset Header
 </div>
</div> 
<div class="photoset center-block">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

Answer 1

我的建议是将photoset img position属性更改为relative：

$(function () {
  $('.photoset').each(function(){
    $(this).data('counter', 0);
  });

  var showCurrent = function (photoset) {
    $items = photoset.find('img');
    var counter = photoset.data('counter');
    var numItems = $items.length;
    var itemToShow = Math.abs(counter % numItems);
    var width = $(window).width;

    $items.fadeOut(1000);

    //Adjust orientation - Portrait or Landscape
    if (($items.eq(itemToShow).width() / $items.eq(itemToShow).height()) > 1) {

      photoset.css({
        width: "52%",
        height: "69%"
      });
    } else if (($items.eq(itemToShow).width() / $items.eq(itemToShow).height()) < 1) {
      photoset.css({
        width: "23%",
        height: "69%"
      });
    }
    $items.eq(itemToShow).fadeIn(1000);
  };

  $('.photoset').on('click', function(e) {
    e.stopPropagation();
    var photoset = $(this);
    var pWidth = photoset.innerWidth();
    var pOffset = photoset.offset();
    var x = e.pageX - pOffset.left;
    if (pWidth / 2 > x) {
      photoset.data('counter', photoset.data('counter') - 1);
      showCurrent(photoset);
    } else {
      photoset.data('counter', photoset.data('counter') + 1);
      showCurrent(photoset);
    }
  });
});

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.body{
  height: 100%;
  width: 100%;
}
.photoset {
  position:relative;
  width: 52%;
  height: 69%;
}

.photoset img {
  position: relative;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
}

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

<div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
        Photoset Header
    </div>
</div>
<div class="photoset center-block">
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
    <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
    <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

Answer 2

正如@rac所说，.photoset的高度为0，因为它的子项绝对定位。

要通过最少量的代码更改来解决此问题，请将您的选择器从.photoset img更新为.photoset img + img。这只会定位图像后放置的图像。这导致您的第一个图像设置.photoset的高度，并且所有后续图像都覆盖在顶部。

＆＃13;
＆＃13;
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); .body{ height: 100%; width: 100%; } .photoset { position:relative; width: 52%; height: 69%; } .photoset img + img { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0px 0px 25px -2px rgba(89,89,89,1); }
＆＃13;
<div class="row"> <div class="col-md-4 col-md-offset-4 text-center"> Photoset Header </div> </div> <div class="photoset center-block"> <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" /> <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" /> <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" /> <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" /> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

正如其他人所提到的，使用absolute定位你的图像毫无意义 - 它会让事情变得更加困难。但是，您可以利用absolute元素可以放在后面其他元素而不推送内容的事实。我的建议只是让一个单独的类告诉你当前正在显示哪个图像。显示的图像将具有relative位置，其他图像将具有absolute位置，允许图像显示在相同的左上角，但有些图像会被遮挡而其他图像会被显示

以下方法的主要优点是您的图片可以按照您的要求缩放，photoset可以放置在文档流中，作为叠加层等内嵌... {＆＃39}非常多才多艺，所以试一试。这也意味着您的javascript变得更轻松，更简单，因为您需要做的就是将正确的类添加到图像中以显示它。你还可以添加一个标题为in的相对方框，它可以正常工作。

＆＃13;

// Don't worry about this, its just a quick implementation to make your photos rotate
var ps = Array.prototype.slice.call(document.querySelectorAll('.photoset')).forEach(function(set){
  var all = Array.prototype.slice.call(set.querySelectorAll('img'));
  var index = 0;
  setInterval(function(){
    all[index].className = '';
    index = index + 1 >= all.length ? 0 : index + 1;
    all[index].className = 'active';
  },1000)
});

＆＃13;

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.body {
  height: 100%;
  width: 100%;
}

.photoset {
  box-shadow: 0px 0px 25px -2px rgba(89,89,89,1);
  overflow: hidden;
  width: auto;
  display: inline-block;
}

#absolute-photoset {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 80%;
  max-height: 80%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 1;
}

.photoset img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  display: block;
}

.photoset img.active {
  position: relative;
  opacity: 1;
}

＆＃13;

<div class="photoset" id="absolute-photoset">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>

<h1>My Title</h1>
<div class="photoset" id="inline-photoset">
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" class="active" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
  <img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
  <img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
<p>The above photoset seems to be pushing this text down as expected!</p>

＆＃13;

如果不位于绝对位置，这个照片集类也会推出内容，我想这就是你要找的东西。你也可以调整.photoset的大小，里面的图片应该跟随（我不确定max-width是否会改变图像的比例，如果是这样，只使用单向max值，喜欢只是 max-width）。

主要优点是你可以将.photoset视为一个盒子而不用担心它的内容，所以现在你可以使用它内联，绝对定位，修复等...

Answer 4

使用padding-bottom: 50%;而不是使用照片集的高度而不是百分比，直到获得所需的高度。然后将图像设置为高度为100％，宽度为100％，而不是顶部，左侧，右侧，底部。

这是一个小提琴Fiddle

CSS和HTML - 如何使div不重叠？

4 个答案: