0

所以，我正在做我的第一个响应式设计，作为一个控制狂，这让我非常恼火，但切中要害。

我做了一个典型的布局，顶部有一个旋转木马。整个页面重新调整大小很好，这不是问题。

我的问题是，由于滑块包含相当大的图像，因此首先加载下面的内容，然后在加载滑块时将内容向下移动。这是意料之中的，通常我会为滑块容器设置一个固定的高度，以防止这种移动。

现在出现了问题 - 我无法为响应式容器设置固定高度，而且我不知道如何防止内容转移。

编辑

我创建了一个 jsFiddle 来解释这个问题，但由于它缓存了图像，你必须在本地运行输出 html 才能看到内容的变化。

http://jsfiddle.net/4mZyF/7/

大家平时都做什么？有任何想法吗？

4

5 回答 5

1

已经好几年了，但最近我不得不处理它；测量您最初的图片尺寸以获得比例：我的图片是 1920X480 像素，因此比例为 25%。赋值给容器的css, height: 0; 底部填充：25%；并且会工作（希望如此）:)

于 2016-07-28T10:17:27.943 回答
0

您的问题实际上可以通过以下方式解决：

  1. 在图像标签上设置尺寸
  2. 默认情况下显示第一个图像（它们已经在您的源中）
于 2012-09-19T22:48:51.063 回答
0

您找到解决此内容转移的方法了吗？我遇到了完全相同的问题，也很难修复它。到目前为止，我为显示的 li 创建了一个非常快的 .hide(1)，然后创建了一个较慢的 .fadeIn(300)。它工作正常，但并不完美。如果您可以让文章向下滑动，您可以使用 .slideDown()，它的效果非常好 - 主要是因为内容会自行向上滑动，并且文章可以将其向下推。问题是我不希望图像向下滑动。

于 2012-10-16T00:48:05.010 回答
0

您可以存储每个图像的原始大小，计算图像将要经过的空间的宽度，从而计算图像的高度，然后为图像容器的高度设置动画，以便下面的文本可以平滑地上下移动？

即使这样，具有不同高度的图像也可以用轮播上下移动内容，除非我误解了这个概念，否则用户的眼睛也很难看！

于 2012-10-16T00:55:54.190 回答
0

如果所有图像最初的宽度/高度相同，则可以使用滑块包装器的宽度来预测图像的高度并将包装器的高度设置min-height为匹配：

$(document).ready(function(){
    var widthOfWapper = $('.slider-wrapper').width();
    var widthOfImages = 940;
    var heightOfImages = 480;
    var imageScale = widthOfWrapper / widthOfImages;

    $('.slider-wrapper').css({
        'min-height': (heightOfImages * ImageScale) + 'px';
    });
});

不理想，但它可能适用于您的场景。

于 2012-09-19T21:50:09.013 回答