不同尺寸的缩放和居中图像，CSS中的文本右对齐

Question

我正在尝试创建一个页面，其中图像位于左侧，标题（文本）位于右侧，图像/文本组合在一起位于页面中央。我面临的挑战是图像可以是任何大小或纵横比。我需要尽可能大的图像（同时仍然适合屏幕，而无需用户滚动）。可以使用javascript（我正在使用Angular）确定图像高度。我在这里草绘了三种情况：

图像可以是纵向（高度>宽度），横向（宽度>高度）或全景图像（宽度>高度，宽度异常宽）。这三种情况的一些注意事项：

1. 标题/文本应为固定宽度（例如300px），并应放置在图像的右侧（应该可见，用户不必水平滚动）。
2. 图像的尺寸应尽可能大-高度应略小于屏幕高度（因此没有滚动条）。对于全景图像，其高度将远远小于屏幕高度，否则文本容器将被推离屏幕。
3. 图像和文本组合应该在屏幕上居中。

希望该草图可以阐明我在此处要传达的内容。

我能够并排显示图像和文本，但是无法在所有三种情况下将它们居中。

<div class="right-side">
    {{ caption }} 
</div>

<div class="left-side">
    <img [src]="imageUrl">
</div>

.left-side {
    float: none; 
    width: auto;
    overflow: hidden;
    text-align: center;

    img {
        margin: 40px;
        margin-right: 0;
        max-height: 80vh; 
        max-width: 80vw;
    }
}

.right-side {
    width: 400px;
    padding: 10px 40px;
    float: right;
    font-size: 16px;
}

Answer 1

CSS Flexbox在CSS Grid系统上具有更多的跨浏览器支持，这是一个CSS对象适合用于图像目的的示例！

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 70%;
  display: block;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
}

.article-container {
  display: flex;
  justify-content: space-between;
}

.left-side {
  flex-grow: 1;
}

.left-side img {
  width: 100%;
  height: 85vh;
  object-fit: cover;
  -o-object-fit: cover;
}

.right-side {
  width: 300px;
  margin-left: 30px;
}

<div class="container">
  <div class="article-container">
    <div class="left-side">
      <img src="https://i.imgur.com/ZwaMNmO.jpg" alt="" />
    </div>
    <div class="right-side">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint magni voluptas laboriosam. Unde, est eos?
      </p>
    </div>
  </div>
</div>