Как исправить проблему с высотой фото?

Question

столкнулся с проблему что при загрузке на сайт фото вертикального формата оно выходит за границы блока, а с вертикальной все работает отлично, как пофиксить? *Фото и Сам сайт наглядные макеты

*,
*::before,
*::after {
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
ol,
ul,
li {
    list-style: none;
}

img {
    vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

html,
body {
    height: 100%;
    line-height: 1;
    background: linear-gradient(180deg, #FFFFFF 0%, #7D2063 224.44%);
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.header {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding: 1.2rem 2rem 0 2rem;
    height: 9rem;
}

/* 
logo */

.logo {
    height: 14rem;
}

.logo_text {
    font-family: 'GV. time';
    font-style: normal;
    font-weight: 400;
    display: flex;
    flex-direction: column;
}

.logo_text1 {
    color: #111;
    font-size: 3rem;
    height: 2rem;
}

.logo_text2 {
    float: right;
    color: #111;
    height: 17rem;
    font-size: 3rem;
}


.pair-center-block {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #5D214D;
    height: 5rem;
    width: 17rem;
}

.text {
    color: #fff;
    font-family: "KTF Jermilov";
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
}

.heart {
    color: rgb(255, 0, 0);
}

/* profile-theme-block */

.profile-theme-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    width: 8rem;
    background: #5D214D;
    padding: 0 1.5rem 0 1.5rem;
}

.PrThLogo {
    color: #fff;
    font-family: "KTF Jermilov";
    font-style: normal;
    font-weight: 400;
    font-size: 2.5rem;
}

.spacer {
    height: 100%;
    background: white;
    width: 1px;
}

/*------------------------------------------------------------slider */

.selectorSlides {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #5D214D;
    width: 4rem;
    height: 2rem;
    color: #fff;
}

/*------------------------------------------------------------main */

.main {
    display: flex;
    justify-content: space-between;
}

.photo-block {
    width: 30rem;
    height: 30rem;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-img {
    height: auto;
    width: auto;
}

<!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>Lovely Pair</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="apple-touch-icon" sizes="57x57" href="/front-part/faviconsMainPage.ico/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/front-part/faviconsMainPage.ico/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/front-part/faviconsMainPage.ico/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/front-part/faviconsMainPage.ico/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/front-part/faviconsMainPage.ico/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/front-part/faviconsMainPage.ico/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/front-part/faviconsMainPage.ico/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/front-part/faviconsMainPage.ico/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/front-part/faviconsMainPage.ico/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="/front-part/faviconsMainPage.ico/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/front-part/faviconsMainPage.ico/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/front-part/faviconsMainPage.ico/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/front-part/faviconsMainPage.ico/favicon-16x16.png">
    <link rel="manifest" href="/front-part/faviconsMainPage.ico/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/front-part/faviconsMainPage.ico/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
</head>
<body>
    <div class="wrapper container mx-auto">
        <!-- header -->
        <section class="header">
            <div class="logo">
                <span class="logo_text">
                    <div class="logo_text1 mb-1" id="changeColorLogoJs1">Lovely</div>
                    <div class="logo_text2" id="changeColorLogoJs2">Pair</div>
                </span>
            </div>
            
            <div class="pair-center-block rounded-3xl">
                <!-- dinamic field(back-end)-->
                <span class="text">test</span>
                <span class="text heart">❤</span>
                <span class="text">test</span>
            </div>

            <div class="profile-theme-block rounded-full">
                <span class="PrThLogo">☾</span>
                <div class="spacer"></div> 
                <span class="PrThLogo">И</span>
                <!-- dynamic field -->
            </div>
        </section>
        <!-- header -->


        <!-- selector up -->
        <section class="selectorSlides mb-10">
            <div class="slider rounded-3xl">▲</div>
        </section>
        <!-- selector up -->

        <!-- main part -->
        <section class="main">
            <div class="photo-block rounded-xl">
                <img src="/front-part/main-page/images/test2.jpeg" class="photo-img">
            </div>
        </section>
        <!-- main part -->

        <!-- selector down -->
        <section class="selectorSlides">
            <div class="slider rounded-3xl">▼</div>
        </section>
        <!-- selector down -->
    </div>
</body>
</html>

Answer 1

.photo-block {
    width: 30rem;
    height: 30rem;
    background: white;
    position: relative;
}
.photo-img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: center center;
}

БЛОГ НА HUSL

Как исправить проблему с высотой фото?

Ответы (1 шт):