Question

我有一个页面，我在其中使用bootstrap进行设计。现在我正在使用网格;我想为我的图像保留8列，为文本保留4列。所以我有以下代码： -

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="bg"></div>
        </div>
        <div class="col-md-4">
            hi how are you
        </div>
    </div>
</div>

以下是bg类的css：

.bg {
    background-image: url('../images/2.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:690px;
}

现在一切正常，但我在这里遇到一个小问题，我在超小屏幕上检查这个，图片占据了几乎整个屏幕，对于文本我必须滚动到底部。

是否有任何方法可以调整图像高度（宽度非常适合）以获得超小屏幕，以便可以在没有太多滚动的情况下一起看到图像和文本？

Answer 1

尝试在CSS3中使用viewport-height：

.bg {
    height:100vh;
}

Answer 2

将this.give div类名称设为img-responsive，并根据需要设置宽度和高度。将图像放入其中并设置其宽度和高度。

<div class="img-responsive" style="width: 300px;height: 300px;">
    <img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
 </div>

Answer 3

如果你想要文字超过图片，你可以这样做：

@media (max-width: 480px) {
  .bg {
    position: absolute;
    left: 0;
    width: 100%;
  }
}

如果你想半顶是图片，半底是文字，你可以这样做：

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div class="wrap">
        <div class="bg"></div>
      </div>
    </div>
    <div class="col-md-4">
      hi how are you
    </div>
  </div>
</div>

CSS

@media (max-width: 480px) {
  .wrap {
    position: relative;
    padding-bottom: 50%;
  }

  .bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

希望它可以提供帮助

使用bootstrap / css

3 个答案: