Jquery 将初始高度设置为响应容器HTML/CSS

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

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

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

现在有一个问题-我不能设置响应容器的固定高度，我不知道如何防止内容转移

编辑

我创建了一个JSFIDLE来解释这个问题，但是由于它缓存了图像，所以您必须在本地运行输出html来查看内容的变化

---

你们通常做什么？有什么想法吗？

如果所有图像最初都是相同的宽度/高度，您可以使用滑块包装的宽度来预测图像的高度，并将包装的

最小高度设置为匹配：

$(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';
    });
});

不理想，但在您的场景中可能会起作用。
您的问题实际上可以通过以下方式解决：

设置图像标记上的尺寸
默认情况下显示第一个图像（它们已在源代码中）
您找到此内容转移的修复程序了吗？我有完全相同的问题，也很难解决它。
到目前为止，我为显示的li创建了一个非常快速的.hide（1），然后创建了一个较慢的.fadeIn（300）。它工作正常，但并不完美。如果您同意让文章向下滑动，您可以使用.slideDown（），它工作得非常好-主要是因为内容自行向上滑动，而文章可以将其向下推。问题是我不希望图像向下滑动
 您是否可以存储每个图像的原始大小，计算图像的空间宽度，从而计算图像的高度，然后设置图像容器高度的动画，以便下面的文本可以平滑地上下移动

即使这样，使用不同高度的图像，通过旋转木马上下移动内容，对用户的眼睛来说也不是件好事，除非我误解了这个概念
 已经好几年了，但最近我不得不处理它；测量您的初始图片尺寸以获得比例：我的是一张1920X480px的图像，因此比例为25%。分配给容器的css，高度：0；垫底：25%；并且会起作用（希望如此）：
请发布您当前遇到问题的相关脚本/html。如果可能的话，在jsFiddle.net上创建一个fiddle。当链接出现问题或你的网站发生变化时，仅仅向网站添加链接对任何可能与你有相同问题的未来用户都是没有用的。感谢你的回答，这更多的是一个理论问题，而不是问题，请阅读我的帖子你用什么来控制滑块的大小？CSS还是JS脚本？所以你不喜欢移动。。。那么，在加载其余文本之前，先加载图片怎么样？@Lukigi:如果这是一个理论问题，那么so可能不是提问的地方。请参阅常见问题解答：关于此处要问的问题。引述：
你应该根据你所面临的实际问题，提出实际的、可回答的问题。闲聊、开放式的问题会降低我们网站的实用性，并将其他问题从头版上推下。
如果这是一个理论性问题，也许最好是在上面提问，但我不是100%同意。谢谢你，rasnwer，但设置最小高度会阻止容器随浏览器窗口缩小。我的问题的简化版本请看这里，谢谢您的回复，但如果我声明维度，它仍然不起作用。我创建了一个JSFIDLE来解释这个问题，但是由于它缓存了图像，所以您必须在本地运行输出html来查看内容的变化。除了你遗漏了图像标签上的尺寸：
如果我给图像加上高度，它会工作，但如果我缩小浏览器窗口，它会拉伸图像，然后进一步变形。为了避免拉伸，我设置了height:auto；但这会覆盖图像的初始高度，并使我回到最初的问题。看到这里了吗？我遗漏了什么？小提琴似乎已经被修改，因为它是张贴和图像保留了正确的纵横比窗口的大小。这不是目的吗？可能还希望将图像设置为
display:block
，以消除一些不需要的空白。感谢您抽出时间，但我认为我们彼此不了解。无论是否在图像上声明大小，在图像加载后内容向下移动的问题仍然存在。如果我只在标签中设置图像大小，则图像的平均高度为686px，这解决了移位问题，但引入了坏比率问题。为了解决这个问题，我在样式中设置了height:auto，并发布了更新的jsfiddle（），但这又带来了内容的变化。