形象出flexbox

Question

我有一张我想要放入 flexbox 的图像。卡片具有固定大小，我希望图像在不指定大小的情况下放入，但它只是忽略了 flexbox。

 .card { border: 2px solid #072227; border-radius: 20px; display: flex; height: 30vh; width: 40vw; }.card__profile-image { display: flex; flex-direction: column; }.img__cont img { height: 100%; }.img__cont { }.card__name { min-height: 100%; }

 <div class="card"> <div class="card__section card__profile-image"> <div class="img__cont"> <:-- <div class="image"> --> <img src="https.//scontent.fkiv9-2.fna.fbcdn.net/v/t39.30808-6/317808332_704091791080096_1098720845539800517_n?jpg._nc_cat=1&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=FFO8v3dmkM8AX_aR9js&_nc_ht=scontent.fkiv9-2.fna&oh=00_AfDQCQcHmZH4QuauHvdxiLEFX0rExv9gMENs8ptsEzdoYg&oe=63DEF9AD" alt="Profile Picture" /> <!-- </div> --> </div> <div class="card__name">Alex Hill</div> </div> <div class="card__section"> <div class="card__info-top"> <span class="info__top-job">Senior Developer | A1-D</span> <span class="info__top-contact">alexhill#0001</span> </div> <div class="card__info-bottom">6 000$</div> </div> </div>

https://codepen.io/watermelon-and-me/pen/jOpQGje

更新。 预期结果： https://i.imgur.com/MBRLAMp.png

Answer 1

在.img__cont和.img__cont img上，分别将max-width和max-height设置为 100%。

 .card { border: 2px solid #072227; border-radius: 20px; display: flex; height: 30vh; width: 40vw; }.card__profile-image { display: flex; flex-direction: column; }.img__cont, .img__cont img { max-width: 100%; max-height: 100%; }.card__name { min-height: 100%; }

 <div class="card"> <div class="card__section card__profile-image"> <div class="img__cont"> <:-- <div class="image"> --> <img src="https.//scontent.fkiv9-2.fna.fbcdn.net/v/t39.30808-6/317808332_704091791080096_1098720845539800517_n?jpg._nc_cat=1&ccb=1-7&_nc_sid=09cbfe&_nc_ohc=FFO8v3dmkM8AX_aR9js&_nc_ht=scontent.fkiv9-2.fna&oh=00_AfDQCQcHmZH4QuauHvdxiLEFX0rExv9gMENs8ptsEzdoYg&oe=63DEF9AD" alt="Profile Picture" /> <!-- </div> --> </div> <div class="card__name">Alex Hill</div> </div> <div class="card__section"> <div class="card__info-top"> <span class="info__top-job">Senior Developer | A1-D</span> <span class="info__top-contact">alexhill#0001</span> </div> <div class="card__info-bottom">6 000$</div> </div> </div>