保持文本移动与浏览器问题

Question

我的图片下方的文字有问题。

出于某种原因，它离图像太远，我希望它始终与图片的底部保持30px的距离。但是，当我将浏览器缩小时，只需将文本按下即可。

我已将CSS放入此JSFiddle.

希望你们中的一个善良的人能够指出我的错误。

由于

迈克尔

更新：

解决了以下问题：

<script type="text/javascript">
        // The social div 
    var $socialDiv;
    
    $(document).ready(function() {
        $socialDiv = $('.social');
    });
    
    $(window).scroll(function() { 
        //Get scroll position of window 
        var windowScroll = $(this).scrollTop(); 
        
        $socialDiv.css({
            'opacity' : 1 - windowScroll / 400,
            'background-position-y' : -windowScroll / 10
        });
    });
</script>

然后在div上添加了一个底部。

<div class="social" style="background-image: url(http://payload51.cargocollective.com/1/7/237315/3336908/HomeImage_o.jpg); background-attachment: fixed; height: 560px; width: 100%; opacity: 1; background-repeat: no-repeat no-repeat; overlow: hidden">
</div>

Answer 1

注意：OP最终解释说他想实现这种http://fearthegrizzly.com/效果。

为什么差距很大？

有多种原因（在{.project_content div上方的边距上添加了<br>标记，但其中一个是.social div中使用浏览器调整大小的背景，而div的高度保持不变相同。这会在背景下方留下一个巨大的空白，即div的剩余部分。这是由css-rule background-size: 100% auto（在社交div上的javascript中定义）引起的。

让我们重写一下CSS，看看我们是否能解决这个问题，不管吗？

会发生什么？

div的背景应该保持相同的高度。为避免间隙形成，将div保持在相同高度是明智的，即背景图像的高度：320px。背景应保持在div的水平中心，但也应保持在顶部。然后，需要修复它以确保您的渐隐滚动功能继续工作。

你还提到了在.social div下面想要30px间距的事情。您需要的只是margin-bottom: 30px。 .project_content div的空白规则和顶部填充是不必要的。

实施

所以我们得到这个CSS：

div.social {
  width: 100%;
  height: 320px;
  margin-bottom: 30px;
  background: white url('image.jpg') repeat-x center top fixed;
  }

在fork of your jsFiddle中，您可以看到这一点。请注意，我无法删除.project_content顶部的任何间距。

我希望一切都清楚。如果您有任何后续行动，请不要犹豫。

Answer 2

HTML中包含图片的样式：

<div class="social" style="background-image: url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg); background-attachment: fixed; background-size: 100%; height: 560px; width: 100%; background-repeat: no-repeat no-repeat; "></div>

它的height设置为560px，因此无论它有多大（或小），图像都会占用很多垂直空间。

以下是用于格式化图片的Javascript：

var $socialDiv,
        // The social div's height 
        socialDivHeight = 560,
        currentSocialDivHeight = socialDivHeight;
        var socalDivWidth = 100;
    $(document).ready(function() {
        $socialDiv = $('.social');
        $socialDiv.css({
            'background-image': 'url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-prn1/563655_324264884301748_471368753_n.jpg)',
            'background-repeat': 'no-repeat',
            'background-attachment': 'fixed',
            'background-size' : '100% auto',
            'height' : socialDivHeight + 'px',
            'width' : socalDivWidth + '%'
            });

您应该更改socialDivHeight值或更改将图像高度设置为socialDivHeight + 'px'

背后的逻辑

Answer 3

为什么div高度不会调整大小

在描述社交div的Javascript中，您定义socialDivHeight = 560。这会导致图像所在的div具有实体大小，因此当浏览器宽度变小时，它不会收缩。

有问题的Javascript是这个（截断的）：

<script type="text/javascript">
  // The social div 
  var $socialDiv,
  // The social div's height 
  socialDivHeight = 560,
  currentSocialDivHeight = socialDivHeight;

  (..)

  // Then, later, you define a css rule from the set height of 560.
  'height' : socialDivHeight + 'px'
</script>

如果您没有定义该高度，则div应自动调整浏览器宽度。

我们如何解决这个问题？

这里的问题是图像被设置为#social div的背景。只要div决定内容的大小，它就会被切断。您确实指定了一个高度，这确保至少显示整个背景图像，但这也意味着div将永远不会随浏览器宽度调整大小。

您需要在div中有一个实际的<img>。

<div class="social">
   <img src="image.jpg">
</div>

确保div和图像的宽度均为100％（浏览器的整个宽度），图像将随浏览器调整大小，div的高度将媲美图像的高度，并且因此，将div下面的其他内容推下来。如果你想要30像素的间距，你也可以在div上使用margin-bottom: 30px;，而不是两个高度为15像素的<br>标签。

div.social {
  width: 100%;
  margin-bottom: 30px;
}

img {
  width: 100%;
}

我创建了一个非常简化的小提琴，希望能够解释HTML和CSS中的所有内容：http://jsfiddle.net/kMnQ2/