我正在尝试构建一个基于卡片的布局，其中图像占据了每张卡片的左半部分。如果我将div与background-image一起使用，则图像占据的宽度恰好是宽度的一半，并扩展到卡右侧内容的高度。
但是，如果我改用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>
答案 0 :(得分：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>
使用 object-fit：封面；宽度：100％;高度：100％; 。您需要通过“ object-fit：cover”来指定宽度和高度。
答案 1 :(得分：2)
您可以简单地使用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>
相似的问题：How can you set the height of an outer div to always be equal to a particular inner div?