Изображение выходит за границы flexbox

Рейтинг: -1Ответов: 3Опубликовано: 01.02.2023

У меня есть картинка которую я хочу поместить в flexbox. Карточка имеет фиксированный размер, но я хочу чтобы изображение занимало все свободное пространство кроме того что требуется для текста и другого.

Ожидаемый результат: result

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>card</title>

        <style>
            * {
                box-sizing: border-box;
            }
            body {
                background-color: #35858b;
            }
            .card {
                border: 2px solid #072227;
                border-radius: 20px;
                display: flex;
                height: 30vh;
                width: 40vw;
            }
            .card__section {
                position: relative;
                display: flex;
                padding: 15px;
            }
            .card__profile-image {
                flex-direction: column;
                align-items: center;
            }
            .card__profile-image .img__cont img {
                border-radius: 20px;
                width: 100%;
            }
            .card__profile-image .img__cont {
                display: flex;
            }
            .card__name {

            }
            .image {
                flex-shrink: 0;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
</html>

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

css
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Что-то типо этого?

* {
  box-sizing: border-box;
}
body {
  background-color: #35858b;
}
.card {
  border: 2px solid #072227;
  border-radius: 20px;
  display: flex;
  padding: 15px;
  gap: 15px;
}
.card__section {
  position: relative;
  display: flex;
}
.card__profile-image {
  flex-direction: column;
  align-items: center;
  width: 40%;
}
.card__profile-image .img__cont img {
  border-radius: 20px;
  width: 100%;
}
.card__profile-image .img__cont {
  display: flex;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>card</title>
    </head>
    <body>
        <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>
    </body>
</html>

▲ 0

во-первых убрать высоту в .card потом последняя строчка css убираем flex-shrink или поставить не ноль а типа 60% или задать максимальную ширину этому рисунку:

.image {
   max-width: 60%
}
▲ 0

Убери высоту height:30vh и сделайте .image img{width:100%} Всё будет ок