0

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

*,
*::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>

с ошибкой нормально

1 ответ 1

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.