столкнулся с проблему что при загрузке на сайт фото вертикального формата оно выходит за границы блока, а с вертикальной все работает отлично, как пофиксить? *Фото и Сам сайт наглядные макеты
*,
*::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>