html - 调整窗口大小并确保图像和文本大小正确

Question

在调整屏幕大小时尝试使用@media 规则进行操作

我想要做的是让图像占据屏幕的 66.7%，当我在大显示器上时，右侧的文本占据其余部分。我把所有的东西都包装成一行，然后是几列。当我将屏幕调整为平板电脑或手机时，我希望图像占据 100% 的宽度，而文本显示在图像下方并居中。我的问题是不确定在屏幕缩小时文本列 (col-lg-4) 不会仅移动到图像下方屏幕左侧的位置将其准确设置为多大。

这是我的 HTML:

<div class="row">
    <div class="col-lg-8 img-example">            
       <div class="img-responsive" style="background-image: url(3.jpg'); background-size: cover; background-position: 47.5% 42.675%; background-repeat: no-repeat; padding-bottom: 80%; min-height: 100%; max-width: 100%;">
       </div>
    </div>
    <div class="col-lg-4">
        <div class="content">
            <h3 class="center-align">Hello</h3>
            <br />
            <h4 class="center-align">Hi</h4>
            <br />
        </div>
    </div>
</div>

CSS:

.img-example{
    width: 66.667%;
    position: relative;
}

@media screen and (max-width: 800px){
    .img-example {
        width: 100%;
        position: relative;
        max-height: 100vh;
        overflow: hidden;   
    }

}

@media screen and (min-width: 801px){
    .img-example .img-responsive{
        padding-bottom: 0!important;
        min-height: 100%;
        position: fixed;
    }
}

.content {
padding: 150px 0 10px 0;
color: #c0d1ca
}

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

不需要媒体查询， Bootstrap 网格系统就是你所需要的。

REF: https://v4-alpha.getbootstrap.com/layout/grid/

同时添加 text-align: center; 到父元素将使子元素居中。如果您将 text-align: center; 添加到子项，它不会自行居中。

.img-example {
  position: relative;
  background-image: url(http://placehold.it/500x500);
  background-size: cover;
  background-position: 47.5% 42.675%;
  background-repeat: no-repeat;
  padding-bottom: 80%;
  min-height: 100%;
  max-width: 100%;
}

.content {
  padding: 150px 0 10px 0;
  color: #c0d1ca;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-lg-8 img-example">
  </div>
  <div class="col-lg-4 content">
    <h3>Hello</h3>
    <br />
    <h4>Hi</h4>
    <br />
  </div>
</div>