放置两个图像并使它们在移动设备上看起来不错，图像的大小不相等

Question

这是我的小提琴小提琴

我正在尝试实现以下目标：

1. 大小不同的两个图像应并排保留在全宽容器中，并且应保持相同的高度。(它适用于我的计算机分辨率 = 1388px 宽度(，但在不同的分辨率下，图像的高度不会相同。

2. 在较小的分辨率(例如小于 991px(下，图像将一个接一个地移动到另一个图像下方(就像在小提琴中看到的那样，但这里的问题是图像之间有一个空间，并且书写不适合第二个图像高度。

3. 最后一件事是：第二张图像中的文字(例如在桌面分辨率大于 991px 的分辨率上(应该在上述段落的书写结束的地方结束。(该段落位于引导容器中(

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid nopadding">
  <section id="about-us">
    <div class="col-lg-5 col-md-12 nopadding">
      <div class="background-image-left">
        <img src="http://placehold.it/2400x1600" class="img-responsive" />
      </div>
    </div>
    <div class="col-lg-7 col-md-12 nopadding">
      <div class="background-image-right" style="background:url('http://placehold.it/1920x481;') center center no-repeat">
        <div class="inner">
          <h2>About us</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </section>
</div>

我需要将这些图像保持在这个大小。

Answer 1

您可以将这两个图像添加为背景图像。此外，具有背景图像的两个div都需要具有固定的相同高度。

<div class="row">
    <div class="col-lg-5 col-md-12 nopadding">
        <div class="background-image-left">
        </div>
    </div>
    <div class="col-lg-7 col-md-12 nopadding">
        <div class="background-image-right">
            <div class="inner">
                <h2>About us</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
</div>

和 CSS

.background-image-left, .background-image-right {
    height: 500px;
    background-size: cover;
    background-position: center center;
}
.background-image-left {
    background: url('http://placehold.it/2400x1600');
}
.background-image-right {
    background: url('http://placehold.it/1920x481');
}