防止图像扩展到弹性行的其他元素之外

Question

我正在尝试构建一个基于卡片的布局，图像占据每张卡片的左半部分。如果我使用带background-image的div，图像正好占据宽度的一半，并精确扩展到卡片右侧内容的高度。

但是，如果我改用img元素(带object-fit: cover(，则当卡片太短时，图像永远不会垂直裁剪，而只会在卡片太高时水平裁剪。如何告诉图像不会导致卡拉伸，再现div背景图像的行为？

例如，第三张和第四张卡片是我想要实现的，但出于语义原因带有图像标签。

main {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: auto;
}
article {
  display: flex;
  flex-direction: row;
  border: 1px solid;
  margin: 1em;
}
article > img {
  object-fit: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}
article > div:first-child {
  background-position: center;
  background-size: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}
article > aside {
  padding: 1em;
}

<main>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img taller than the text</h2>
      <p>
        Here the image extends beyond the text, which I do not want.
      </p>
    </aside>
  </article>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img shorter than the text</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
</main>

Answer 1

您可以使用position:absolute简单地使图像脱离流程，因此只有文本内容才能定义高度：

main {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: auto;
}
article {
  /*display: flex;
  flex-direction: row; not needed sine one element is in-flow */
  border: 1px solid;
  margin: 1em;
  position:relative;
}
article > img {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:50%;
  object-fit: cover;
}
article > aside {
  padding: 1em;
  width:50%;
  margin-left:auto;
  box-sizing:border-box;
}

<main>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img taller than the text</h2>
      <p>
        Here the image extends beyond the text, which I do not want.
      </p>
    </aside>
  </article>
  <article>
    <img src="https://picsum.photos/id/411/1000/900" />
    <aside>
      <h2>img shorter than the text</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>

类似的问题：如何将外部div 的高度设置为始终等于特定的内部div？

Answer 2

main {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: auto;
}
article {
  display: flex;
  flex-direction: row;
  border: 1px solid;
  margin: 1em;
}
article > img {
  object-fit: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}
article > div:first-child {
  background-position: center;
  background-size: cover;
  width: 50%;
  flex-grow: 0;
  flex-shrink: 0;
}
article > aside {
  padding: 1em;
}
.img-container{
  border:2px solid red;
  overflow:hidden;
  position:relative;
}
.img-container div{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.img-container img{
      object-fit: cover;     
      width:100%;
      height:100%;
}

<main>
  <article>
   <div class="img-container">
   <div>
    <img src="https://picsum.photos/id/411/1000/900" />
    </div>
    </div>
    <aside>
      <h2>img taller than the text</h2>
      <p>
        Here the image extends beyond the text, which I do not want.
      </p>
    </aside>
  </article>
  <article>
  <div class="img-container">
    <img src="https://picsum.photos/id/411/1000/900" />
    </div>
    <aside>
      <h2>img shorter than the text</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With very little text, the background image is cropped to take up little height, which is what I'm trying to achieve with an image tag.
      </p>
    </aside>
  </article>
  <article>
  <div style="background-image: url(https://picsum.photos/id/411/1000/900)">
  </div>
    <aside>
      <h2>background image</h2>
      <p>
        With enough text, the image is the right height, with both the <kbd>img</kbd> tag and the background image.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut turpis est. Maecenas vehicula tempor purus, non laoreet turpis aliquet sit amet. Sed pellentesque augue at risus dignissim porttitor. Curabitur aliquam justo ut ante imperdiet lobortis. Aenean sit amet dui eros. Pellentesque dictum imperdiet ex in condimentum. Proin imperdiet eros a sapien egestas, quis auctor arcu laoreet. In interdum at ligula sit amet ornare. Mauris sed feugiat eros. Vestibulum in eros auctor, iaculis neque eu, tincidunt neque. Curabitur eget ligula ac tortor viverra cursus non id nunc. Morbi vestibulum ligula felis, id aliquam metus placerat at. In sed urna bibendum, volutpat ipsum et, placerat dui. 
      </p>
    </aside>
  </article>
</main>

使用对象适合：覆盖;宽度：100%;高度：100%;。您需要使用"对象适合：覆盖"来指定宽度和高度才能实现此目的。