Question

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

这是一个小屏幕截图，显示在浏览器窗口全屏的桌面上它应该如何显示 - 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-->

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

Answer 1

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

<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时，必须关闭每个元素才能使其正常工作。

难以说出正确的解决方案，因为我们并不真正了解您的目标，但我希望这会有所帮助......

Answer 2

提供徽标类img-responsive

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

它是一个引导类

Answer 3

最好使用媒体查询。例如

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

在css文件中使用它

浏览器和移动设备上的所有内容都缩小了但我的形象？引导

3 个答案: