html - 定位两个图像并使它们在移动设备上看起来不错，图像大小不相等

Question

这是我的 fiddle Fiddle

我正在努力实现以下目标:

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

2. 在较小的分辨率(例如小于 991 像素)下，图像会一张一张地放在另一张图片下(就像在 fiddle 中看到的那样，但这里的问题是图像之间有一个空间，文字会不适合第二个图像高度。

3. 最后一件事是:第二张图片中的文字(例如在桌面分辨率大于 991 像素的情况下)应该恰好在上面段落的文字结束处结束。 (该段落在 Bootstrap 容器中)

<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');
}