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

时间：2018-08-26 16:17:55

标签： html css html5

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

在过去的几个小时中，我一直在尝试创建一个关于我的页面，尝试将CS​​S和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-->

非常感谢您提供修复此问题的帮助。

1 个答案:

答案 0 :(得分：0)

鉴于您所描述的问题，我想我会尝试采用网格方法。利用这个相当新的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>

尽管这种方法（您或我的方法）总体上存在一个潜在的问题，因为图像的宽度或高度取决于显示页面的屏幕，因此您的图片看起来不太好看。

相关问题
最新问题