防止图像扩展到伸缩行的其他元素之外 [英] Prevent image from expanding beyond other elements of flex row

问题描述

我正在尝试构建一个基于卡片的布局，其中图像占据了每张卡片的左半部分.如果我将div与background-image一起使用，则图像占据的宽度恰好是宽度的一半，并且会扩展到卡右侧内容的高度.

I am trying to build a card-based layout, with an image taking up the left-hand half of each card. If I use a div with a background-image, the image takes up exactly half the width, and expands to exactly the height of the content on the right-hand side of the card.

但是，如果我改用img元素(带有object-fit: cover)，则当卡太短时，图像永远不会垂直裁切，而当卡太高时，图像只会水平裁切.如何告诉图像不要使卡张开，从而再现div的背景图像的行为?

However, if I instead use an img element (with object-fit: cover), the image never crops vertically when the card is too short, but instead only horizontally when the card is too tall. How can I tell the image not to cause the card to stretch, reproducing the behaviour of the div's background image?

例如，第三张和第四张卡是我要达到的目标，但是出于语义原因带有图像标签.

As an example, the third and fourth cards are what I am trying to achieve, but with an image tag for semantic reasons.

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>

推荐答案

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

You can simply make the image out of the flow using position:absolute so only the text content will define the height:

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?

这篇关于防止图像扩展到伸缩行的其他元素之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！