html - Bootstrap 网站在浏览器中看起来不错，但 div 在移动设备中无法正确呈现

Question

我使用 Bootstrap 创建了一个多行、多列的网站。该网站在常规浏览器中看起来很棒，但是当我为移动设备调整它的大小时，div 不对齐，一个一个堆叠，里面的内容消失，或者 div 变得非常扁平以至于您看不到图像。如何防止 div 在大/中尺寸屏幕上奇怪地调整大小，但在小屏幕上按比例堆叠？

这是我的一行:

<div class="row row1">
            <div class="col-xs-12 col-sm-6 col-lg-5 row1-topleft">
                <div class="inside-index">
                    <h2>one header</h2>
                    <p>content</p>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-7 row1-topright">
                <div class="inside-index-img">
                    <img src="http://placehold.it/900x1200">
                </div>
            </div>
        </div><!-- end  row1 -->

和CSS:

html, body {
    height: 100%;
}
div {
    height: 100%;
}
.row1 {
    height: 120%;
}

这是一个 Fiddle重新创建整个网站和问题。

Answer 1

如果我理解正确，这就是你得到的: 这就是你想要的:

您正在寻找的解决方案是将图像作为背景并使用 css 属性 background-size:cover 来适应列的大小。

代码:https://jsfiddle.net/jkLjnt0d/7/