引导 3.3.4 单张图像未显示在 768 像素以下

Bootstrap 3.3.4 single image not showing under 768 pixels

本文关键字：像素 单张 图像 引导 显示      更新时间：2023-09-26

除了这个问题之外，我正处于使网站完全响应的最后阶段。我有一个带有背景视频的标题和一个带有div img元素的div。一切都可以很好地缩放，直到屏幕分辨率达到小于 768 像素宽，然后img设置为可见性：隐藏，根据 Chrome 中的开发人员工具。

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

网站是使用 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>

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

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

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

尝试将其添加到您的主.css行 ~369：

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

您可以根据需要进行调整。 WOW JS插件将可见性设置为隐藏，因为图像在屏幕上太靠后，您尚未将其滚动到视图中。希望如果您可以正确定位它，该插件将按预期工作。

相关文章：