html - 如何将两个div彼此相邻放置，其中一个包含根据另一个div的大小缩放的图像？

我正在学习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-->

我真的很感激你帮我把这个修好。

最佳答案

考虑到你描述的问题，我想我会尝试使用网格方法。利用这个相当新的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>

尽管总体上（你的或我的）这种方法有一个潜在的问题，那就是你的图片看起来不太可能好看，因为它的宽度或高度取决于显示页面的屏幕。

关于html - 如何将两个div彼此相邻放置，其中一个包含根据另一个div的大小缩放的图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52028089/