基于第一列

Question

我试图创建一个＆＃34;面板＆＃34;它分为两个相等宽度的列，第一个包含文本，第二个包含图像。图像很大，应按比例缩小以覆盖右侧。面板的高度应该遵循左侧的文本量。

它应该是这样的，图片正在使用object-fit: cover;，因此它完全填充其容器，但我不想让max-height: 200px;在.panel < /强>

这可能以某种方式（最好不使用JavaScript）吗？

＆＃13;

＆＃13;

.panel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;

  /* I want this to be flexible based on text in panelText */
  /*max-height: 200px;*/
  
}
.panel .panelText {
  padding: 1em;
  flex: 1;
  width: 50%;
  background-color: black;
  color: white;
}
.panel .panelImage {
  object-fit: cover;
  width: 50%;
}

＆＃13;

<section class="panel">
  <div class="panelText">
    <h3>This is a header</h3>

    <ul>
      <li>One one one</li>
      <li>Two two two</li>
      <li>Three three three</li>
      <li>Four four four</li>
    </ul>

    <p>Now we're at the end</p>
  </div>

  <img class="panelImage" src="https://placebear.com/1000/1000" />

</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是可能的，但你不应让图像决定其容器的大小 - 使其成为position: absolute。 Flex容器将始终适应最大元素，因此object-fit: cover在这里毫无意义。

或者，我推荐这一点，使用图片作为div的背景图片（如果它在您的网站设置中可行）。

这里的第一个解决方案：

＆＃13;

＆＃13;

.panel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;      
}
.panel .panelText {
  padding: 1em;
  flex: 1;
  width: 50%;
  background-color: black;
  color: white;
}
.panel .panelImage {
  position: absolute;
  height: auto;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.panel .image-wrapper {
  position: relative;
  width: 50%;
  overflow: hidden;
}

＆＃13;

<section class="panel">
  <div class="panelText">
    <h3>This is a header</h3>

    <ul>
      <li>One one one</li>
      <li>Two two two</li>
      <li>Three three three</li>
      <li>Four four four</li>
    </ul>

    <p>Now we're at the end</p>
  </div>
  <div class="image-wrapper">
    <img class="panelImage" src="https://placebear.com/1000/1000" />
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

第二个解决方案 - background-image：

＆＃13;

＆＃13;

.panel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: red;      
}
.panel .panelText {
  padding: 1em;
  flex: 1;
  width: 50%;
  background-color: black;
  color: white;
}
.panel .image {
  width: 50%;
  background-image: url('https://placebear.com/1000/1000');
  background-size: cover;
  background-position: center center;
}

＆＃13;

<section class="panel">
  <div class="panelText">
    <h3>This is a header</h3>

    <ul>
      <li>One one one</li>
      <li>Two two two</li>
      <li>Three three three</li>
      <li>Four four four</li>
    </ul>

    <p>Now we're at the end</p>
  </div>
  <div class="image">
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;