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

调整屏幕大小时尝试使用@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>

任何帮助都将不胜感激

---

谢谢

无需媒体查询，引导网格系统就是您所需要的一切

参考：

同时添加

文本对齐：居中到父元素将使子元素居中。如果添加
文本对齐：居中

.img示例{
位置：相对位置；
背景图片：url(http://placehold.it/500x500);
背景尺寸：封面；
背景位置：47.5%42.675%；
背景重复：无重复；
垫底：80%；
最小高度：100%；
最大宽度：100%；
}
.内容{
填充：150px 0 10px 0；
颜色：#c0d1ca；
文本对齐：居中；
}

你好


你好


谢谢您的帮助，只是一个简单的问题：与其在css中调用image，不如在div中调用它，这会有什么不同吗？@Draklin尝试使用样式表（更快），不建议使用内联样式。你可以在这里阅读更多内容：@Draklin如果有任何答案对你有帮助，如果答案是你想要的，请将其标记为未来的读者。谢谢大家!=我问这个问题的唯一原因是因为我必须在html代码中运行IF语句，以防我需要显示不同的image@Draklin我的意思是，很多网站/项目都使用内联风格，如果你只是在做一个项目，只要它还在工作，你就可以随意使用它。对于最佳实践，不建议这样做，但这样做并没有错。请注意，内联样式具有最高优先级。
.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
}