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

无需媒体查询，您只需要自举网格系统。

参考：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>

调整窗口大小和确保图像和文本都是正确的大小

1 个答案: