css - 如何将两个 div 并排放置，其中一个包含根据另一个 div 的大小缩放的图像？

Question

我正在学习 CSS 和 HTML，请原谅我的无知。

在过去的几个小时里，我一直在尝试创建一个关于我的页面，尝试使用 CSS 和 HTML 的各种组合来让它工作，但我遇到了一些麻烦。本质上，我试图在垂直图像旁边放置一段文本。我试图让图像在右侧缩放，以便它与文本正文的高度相同，并且图像与 div 稍微分开。我也希望它能填满分区；图片显示了我正在努力实现的目标。

这是我的成就:

进度:

我要实现的目标:

相关代码如下:

.Row {
  display: table;
  table-layout: fixed;
  /*this was fixed*/
  margin-bottom: 5px;
}

.Column {
  display: table-cell;
}

.Column #aboutMe {
  background-color: rgba(50, 74, 17, 1.00);
  margin-right: 20%;
  float: left;
}

.Column #aboutMe h1 {
  color: white;
  padding-left: 10px;
}

.Column #aboutMe p {
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

.Column #test {
  max-height: 100%;
  max-width: 100%;
}

<!--About me start-->

<div class="Row">
  <div class="Column">
    <div id="aboutMe">
      <h1 id="blogTitle">What it's all about</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
        interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
        enim. Donec at nisl nec massa mollis convallis.
      </p>
      <p>
        Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
        pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
      </p>
      <p>
        Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
        dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
        molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
        porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
      </p>
      <p>
        Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
        Ut a placerat enim. Sed gravida fermentum varius
      </p>
      <p>
        Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
        augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
        eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
      </p>
    </div>
  </div>
  <div class="Column">
    <img id="test" src="images/about.jpg">
  </div>

</div>
<!--About me end-->

如果能帮助解决此问题，我将不胜感激。

Answer 1

鉴于您描述的问题，我想我会尝试使用网格方法。利用这个相当新的 CSS 功能将使您更容易拥有一个响应式页面，同时从相当小的样板 CSS 开始。您可以在那里阅读更多信息 https://www.w3schools.com/css/css_grid.asp或者很容易找到有关 CSS 网格的教程。

针对您的具体问题，这是我想出的一个小片段:

.Row {
  display: grid;
  grid-template-columns: 8fr 2fr;
  grid-template-areas: "content picture";
  grid-column-gap: 10px;
}

.Column {
  grid-area: content;
}

.Column #aboutMe {
  background-color: rgba(50, 74, 17, 1.00);
  float: left;
}

.Column #aboutMe h1 {
  color: white;
  padding-left: 10px;
}

.Column #aboutMe p {
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}

.Picture-Container {
  grid-area: picture;
}

.Picture {
  width: 100%;
  height: 100%;
}

<div class="Row">
  <div class="Column">
    <div id="aboutMe">
      <h1 id="blogTitle">What it's all about</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor eros justo, ut facilisis nisi faucibus id. Sed venenatis aliquam rutrum. Maecenas id elementum quam, eget molestie sapien. Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Suspendisse eu tristique ligula. Mauris a mollis felis. Vivamus finibus mi quam, ac varius quam pretium in. Etiam fermentum dolor commodo massa fermentum, egestas porta ex bibendum. Vestibulum ac erat sem. Nam
        interdum risus et tortor efficitur pretium. Curabitur lobortis massa lectus, non efficitur nisi ornare vel. Proin porttitor commodo libero, quis accumsan dui hendrerit at. Aliquam eget dui placerat, luctus nisi et, auctor mi. Aliquam a convallis
        enim. Donec at nisl nec massa mollis convallis.
      </p>
      <p>
        Curabitur tristique lacus non leo dapibus, at mattis est rutrum. Duis vel porttitor neque, nec aliquam nulla. Donec pulvinar, dui sed blandit ultrices, justo leo cursus turpis, vitae vehicula massa nisl nec erat. Vestibulum tincidunt urna non lorem consequat
        pulvinar. Curabitur dignissim varius odio, eget dignissim lectus feugiat et. Praesent sit amet euismod purus. Sed lobortis bibendum risus, quis iaculis justo fermentum quis. Integer consectetur pellentesque nibh, eu dignissim odio facilisis sodales.
      </p>
      <p>
        Nullam a felis euismod, sollicitudin enim eget, laoreet sapien. Nullam non nulla aliquet, gravida arcu sed, laoreet libero. Quisque hendrerit lobortis hendrerit. Etiam condimentum urna elit, ac tincidunt erat facilisis ut. Nullam semper leo felis, vitae
        dictum dui placerat a. Maecenas ornare, lacus id vestibulum euismod, libero turpis efficitur lectus, ac vehicula odio magna sit amet lacus. Quisque id scelerisque erat. Cras placerat pulvinar libero quis lobortis. Morbi nec sem id risus scelerisque
        molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum ex ac lectus porttitor, a varius elit semper. Curabitur laoreet sit amet nisl in varius. Duis eu ipsum ac risus consectetur
        porta vitae eget dolor. Sed blandit, leo vitae efficitur auctor, est mi dapibus dui, et iaculis dui odio et neque.
      </p>
      <p>
        Cras libero nibh, ullamcorper sed aliquet euismod, posuere ac erat. Nam eget tincidunt odio. Nam sed justo iaculis, blandit ui non, luctus quam. Fusce nibh ligula, laoreet laoreet eleifend a, convallis ac ex. Aenean interdum elit at erat cursus tincidunt.
        Ut a placerat enim. Sed gravida fermentum varius
      </p>
      <p>
        Curabitur vestibulum feugiat gravida. Phasellus aliquet auctor dictum. Sed sed tristique justo, id facilisis quam. Suspendisse mattis erat dolor, ac convallis sem dapibus eget. Aenean tempus posuere nibh, at molestie ante gravida vel. Praesent at accumsan
        augue. Fusce volutpat et sem nec ullamcorper. Nam massa urna, sodales ac quam vitae, feugiat vulputate metus. Praesent commodo sit amet nibh in rutrum. Aliquam augue nunc, molestie eget consequat et, pretium nec risus. Sed aliquam massa sapien,
        eu suscipit tortor vehicula suscipit. Maecenas et ligula vel metus dignissim vestibulum ac in nulla. Cras id ornare ligula.
      </p>
    </div>
  </div>
  <div class="Picture-Container">
    <img class="Picture" src="images/about.jpg">
  </div>
</div>

总体而言，这种方法(您的或我的)的一个潜在问题是您的图片看起来不太可能很好看，因为它的宽度或高度将取决于显示页面的屏幕。