Question

除了这一个问题，我正处于使网站完全响应的最后阶段。我有一个带有背景视频的标题和一个在此div中带有img元素的div。根据Chrome中的开发人员工具，所有内容都可以扩展，直到屏幕分辨率达到不到768像素宽，然后将img设置为visibility：hidden。

我尝试创建一个类并设置display: inline !important，使用jQuery为每个分辨率提供不同的图像，以及尝试各种媒体查询以期处理此问题。我还尝试使用另一个图像，该图像在页面下方可见，代替所需的图像，仍然没有骰子。我不知所措，来找你们好帮助。

Site使用Bootstrap 3.3.4与Animate.css（https://daneden.github.io/animate.css/）和WOW.js（http://mynameismatthieu.com/WOW/）构建。我也可以提供网站的URL。

这是我的视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

这是标题：

<header id="first">
    <div class="header-content">
        <div class="inner">
            <img src="img/icon_logo.png" id="logo" class="wow flipInX img-responsive col-xs-12" alt="Find and meet friends wherever you roam." />
        </div>
    </div>
    <video autoplay="" loop="" class="fillWidth fadeIn wow collapse in" data-wow-delay="0.5s" poster="https://s3-us-west-2.amazonaws.com/coverr/poster/Traffic-blurred2.jpg" id="video-background">
        <source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Traffic-blurred2.mp4" type="video/mp4">Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</header>

我甚至尝试取出class属性（包括属性中的每个类）都无济于事。如果我需要为您提供更多代码，我也可以这样做。任何帮助将不胜感激！提前谢谢。

Answer 1

我注意到在网站上看到图片在页面上（在一个狭窄的视图中<768px），但由于它的fixed定位和大量的顶部和底部，它在屏幕外（远处）填充。

当浏览器宽度超过768px时，会在媒体查询中添加一些新的css，将图像定位在正确的位置。一旦它处于这个位置，哇js就会起作用，因为它在视野中并将其可见性更新为可见。

尝试将此添加到main.css行~369：

header .header-content {
    padding: 0em 5em;
    top: 50%;
}

您可以根据需要调整此项。 wow js插件将可见性设置为隐藏，因为图像在屏幕上已经很远，你还没有将其滚动到视图中。希望如果你能正确定位它，插件将按预期工作。

Bootstrap 3.3.4单个图像不显示在768像素下

1 个答案: