一切都缩小了，但我在浏览器和移动设备上的图像？引导程序答案

【问题标题】：Everything shrinks to size but my image on browser and mobile? Bootstrap一切都缩小了，但我在浏览器和移动设备上的图像？引导程序
【发布时间】：2017-05-28 07:46:24
【问题描述】：

我正在尝试使用引导程序构建我的朋友网站，当我减小页面大小时，所有内容（包括视频和所有文本）都会缩小，但由于某种原因，我使用的徽标不会缩小并落后浏览器窗口缩小时的视频，在移动设备上，它会使整个网页失去平衡，因为它以全尺寸显示，而不是与页面的其余部分一起缩小？

这是一个小屏幕截图，显示了它在浏览器窗口全屏的桌面上的外观 - image 这就是我缩小浏览器窗口时的效果，你可以看到文本和视频框缩小得很漂亮，徽标......不是那么多； Image Screencap here

<section id="hero" data-type="background" data-speed="5">
        <article>
            <div class="container clearfix">
                <div class="row">

                    <div class="col-sm-6">
                        <img src="assets/img/logo-badge.png" alt="Bootstrap to Wordpress" class="logo">
                    </div><!-- col -->

                            <div class="col-sm-6 hero-text">

                        <video width="100%" height="410" controls>
  <source src="assets/img/Flanamation.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>




        </article>  

    </section><!--hero-->

任何帮助或指导将不胜感激！

【问题讨论】：

那里，在你的图片上，你有col-sm-6 它不会缩小，除非你的设备 read more on bootstrap，尝试将其更改为 col-md-6 - 但是，它只会使其堆叠。要使其更小，请使用img-responsive (reference)
堆叠也可以！我想我的图像尺寸太宽了？想是因为就在它堆叠之前，它稍微隐藏在视频后面。也许我会尝试一下。我还没有听说过 img-responsive，我在哪里将它添加到代码中？感谢您的帮助！
您可以在 <img> 课程中添加 img-responsive，就在 logo 之后。哦，好吧，tbh，当我读到你的问题时，我无法决定是应该建议堆叠还是缩小尺寸..

标签： css twitter-bootstrap

【解决方案1】：

使用 .img-responsive 通常可以在引导程序中使用，但正如其他评论提到的那样，我不会将图像包装在当前容器中。通常我自己使用引导程序将徽标置于顶部。这样的工作：

<section id="hero" data-type="background" data-speed="5">
  <article>
    <div class="container clearfix">
      <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4">
          <img src="assets/img/logo-badge.png" alt="Bootstrap to Wordpress" class="logo">
        </div>
        <!-- col -->
        <div class="col-sm-6 hero-text">
          <video width="100%" height="410" controls>
            <source src="assets/img/Flanamation.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
  </article>
</section>

另外，值得注意的是，您有一些未关闭的容器。请记住，在编写 HTML 时，必须关闭每个元素才能使其正常工作。

很难准确地说出正确的解决方案，因为我们并不真正了解您想要的外观，但我希望这会有所帮助...

【讨论】：

【解决方案2】：

给标志类 img-responsive

<img some code 
class="img-responsive">

它是一个引导类

【讨论】：

【解决方案3】：

最好使用媒体查询。例如

@media only screen and (max-width: 750px) {
.logo{
    height: 70px;
}
}

在你的 css 文件中使用它

【讨论】：