Как разместить два 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>

Одна потенциальная проблема, несмотря на общий подход (ваш или мой), заключается в том, что маловероятно, что ваша картинка будет выглядеть хорошо, учитывая ее ширину или высоту, которые будут зависетьна экране, где отображается страница.