将初始高度设置为响应式容器 HTML/CSS答案

【问题标题】：Set initial height to responsive container HTML/CSS将初始高度设置为响应式容器 HTML/CSS
【发布时间】：2016-07-28 18:17:27
【问题描述】：

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

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

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

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

编辑

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

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

你们平时都做什么？有什么想法吗？

【问题讨论】：

请发布您当前遇到问题的相关脚本/html。如果可能的话，在 jsFiddle.net 上创建一个小提琴。当链接腐烂设置或您的网站已更改时，仅添加指向网站的链接对于任何可能遇到与您相同问题的未来用户都没有用。
感谢您的回复，这更像是一个理论问题而不是问题，请阅读我的帖子
你用什么来控制滑块的大小？ CSS 还是 JS 脚本？
所以你只是不喜欢移动......所以你要等图片先加载，然后再加载其余的文本？
@Lukigi：如果这是一个理论问题，那么 SO 可能不是问它的地方。请参阅常见问题解答：stackoverflow.com/faq 在此处提出什么问题。引用：You should only ask practical, answerable questions based on actual problems that you face. Chatty, open-ended questions diminish the usefulness of our site and push other questions off the front page. 如果这是一个理论问题，那么programmers.stackexchange.com 可能会更好地提出这个问题，但我不是 100% 的。

标签： jquery html css responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您的所有图像最初都是相同的宽度/高度，您可以使用滑块包装器的宽度来预测图像的高度并设置包装器的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';
    });
});

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

【讨论】：

谢谢你的支持，但是设置最小高度会阻止容器随着浏览器窗口的缩小。请参阅此处了解我的问题的简化版本jsfiddle.net/4mZyF/7

【解决方案3】：

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

在图片标签上设置尺寸
默认显示第一个图像（它们已经在您的源中）

【讨论】：

感谢您的回复，但如果我声明尺寸，它仍然不起作用。我创建了一个 jsFiddle 来解释这个问题，但由于它缓存了图像，你必须在本地运行输出 html 才能看到内容的变化。 jsfiddle.net/4mZyF/7
除非你错过了图片标签上的尺寸：<img src="http://www.lukasgladki.co.uk/test.png" width="1600" height="686">
如果我将高度放在图像上，它会起作用，但如果我缩小浏览器窗口，它会拉伸图像，然后进一步变形。为了避免拉伸，我放了 height: auto;到图像样式，但这会覆盖图像初始高度并使我回到最初的问题。看到这里jsfiddle.net/4mZyF/11我错过了什么吗？
小提琴自发布以来似乎已被修改，并且图像在窗口调整大小时保持正确的纵横比。这不是本意吗？可能还想将图像设置为 display: block 以消除一些不受欢迎的空白。
感谢您抽出宝贵时间，但我认为我们彼此并不了解。无论是否在图像上声明大小，我仍然遇到图像加载后内容被向下移动的问题。如果我只在标签中设置图像大小，则图像永久为 686px 高度，这解决了移位问题，但引入了不良比率问题。为了解决这个问题，我在样式中设置了 height: auto 并发布了更新的 jsfiddle (jsfiddle.net/4mZyF/11)，但这会带来内容的转变。

【解决方案4】：

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

【讨论】：

【解决方案5】：

你能存储每张图片的原始尺寸，计算图片空间的宽度，从而计算图片的高度，然后为图片容器的高度设置动画，这样下面的文本就可以平滑地上下移动了吗？

即使有不同高度的图像用旋转木马上下移动内容，用户的眼睛也很难看，除非我误解了这个概念！

【讨论】：