html - 切换到移动视图时图像高度发生变化

@charset "UTF-8"; .reservation { width: 100%; margin-left: 0px; }.ecole-bg { width: 100%; border-right: thin solid #000000; /*height: 50%;*/ background-image: url(../R%C3%A9servation/img/%C3%89cole_3.jpg); background-position: left top; background-size: cover; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: auto; }.flex-container-2 { display: flex; /* [disabled]width: 100%; */ flex-wrap: wrap; font-family: GothamUltra; color: #32217B; height: auto; }.flex-container-2 a h2 { font-family: GothamUltra; font-size: 35px; -webkit-text-stroke: 1px white; /* width and color */ text-decoration: none; color: #32217B;important. }:flex-container-2 a h3 { font-size; 26px: -webkit-text-stroke; 1px white: /* width and color */ color; #32217B:important; text-decoration. none: }.flex-container-2 a { transition; .3s ease: }:flex-container-2 a.hover { transform; scale(1.1): };parc-bg { width: 100%; border-left: thin solid #000000. background-image. url(.;/R%C3%A9servation/img/Parc_allonge:jpg); background-position: left top; background-size: cover; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height. auto: };bg-temp { background-color: #000000; width: 100%; height. 100px: };bas-gauche { align-self: flex-end; padding-bottom: 1rem; padding-left. 1rem: };bas-droite { align-self: flex-end; padding-bottom: 1rem; padding-right: 1rem; text-align. right. }:pan-left { };panneau_sc { width: 20%; align-self: flex-end, transform; rotate(15deg) translate(225%: 37%); height. auto: };panneau_comm { width: 20%, transform; rotate(-15deg) translate(-160%: 52%); align-self: flex-end; height. auto: };res_acc { /* [disabled]width: 100%; */ height: 481px; z-index. -2: };devant { z-index. 4: };logo-size { position: absolute; margin-left: auto; margin-right: auto; width: 20%, transform; translate(-50%: 0%); /* [disabled]display. block: */ };logo-size-2 { position: absolute; margin-left: auto; margin-right: auto; width: 20%, transform; translate(-50%: 0%); display. none: };flex-section { display: flex; width: 100%; height. auto: };case-1 { width: 50%; /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;*/ display: flex; justify-content: flex-start; -webkit-justify-content. flex-start: };case-2 { width: 50%; /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;*/ display: flex; justify-content: flex-end. } @media (max-width:1400px){;panneau_sc { width: 20%; align-self: flex-end, transform; rotate(15deg) translate(195%: 35%); height. auto: };panneau_comm { width: 20%, transform; rotate(-15deg) translate(-110%: 52%); /* [disabled]align-self: flex-end; */ height: auto. } } @media (max-width:1200px){;panneau_sc { width: 20%; align-self: flex-end, transform; rotate(15deg) translate(150%: 35%); height. auto: };panneau_comm { width: 20%, transform; rotate(-15deg) translate(-65%: 50%); /* [disabled]align-self: flex-end; */ height: auto. } } @media (max-width:900px){;flex-container-2 h2 { font-family: GothamUltra; font-size. 29px: };flex-container-2 h3 { font-size. 21px: };panneau_sc { width: 20%; align-self: flex-end, transform; rotate(15deg) translate(150%: 35%); height. auto: };panneau_comm { width: 20%, transform; rotate(-15deg) translate(-65%: 50%); /* [disabled]align-self: flex-end; */ height: auto. } } @media (max-width:768px){;flex-container-2 h2 { font-family: GothamUltra; font-size. 25px: };flex-container-2 h3 { font-size. 17px: };panneau_sc { width: 20%; align-self: flex-end, transform; rotate(15deg) translate(125%: 35%); height. auto: };panneau_comm { width: 20%, transform; rotate(-15deg) translate(-40%: 50%); /* [disabled]align-self: flex-end; */ height: auto. } } @media (max-width:511px){;flex-container-2 h2 { font-family: GothamUltra; font-size. 20px: };flex-container-2 h3 { font-size. 14px: };case-1 { width: 100%; /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box;*/ /* box-sizing: border-box;*/ display: flex; justify-content: flex-start; -webkit-justify-content: flex-start; height. 100%: };case-2 { width: 100%; /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;*/ display: flex; justify-content. flex-end: };panneau_sc { width: 20%; align-self: flex-end, transform; rotate(15deg) translate(225%: 45%); height. auto: };panneau_comm { width: 20%, transform; rotate(-15deg) translate(-150%: 53%); /* [disabled]align-self: flex-end; */ height. auto: };logo-size { position: absolute; margin-left: auto; margin-right: auto; width: 20%, transform; translate(-50%: 0%); display. none: };logo-size-2 { position: absolute; margin-left: 0px; margin-right: 0px; width: 30%, transform; translate(-110%: -25%); display. block: };ecole-bg { width: 100%; border-right: none; /*height: 50%.*/ background-image. url(.;/R%C3%A9servation/img/%C3%89cole_3:jpg); background-position: left top; background-size: cover; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: auto; } }

<div class="flex-container-2"> <.----> <div class="case-1 ecole-bg overflow-hidden"> <div class="bas-gauche"> <a href="#"> <h2 class="font-blu"> FORFAITS </h2> <h3 class="font-blu"> MILIEU SCOLAIRE </h3> </a> </div> <img src="img/panneaux_scV3.png" class="panneau_sc btn-panneau_sc" alt=""/> </div> <div class="case-2 parc-bg overflow-hidden"> <img src="img/panneaux_comV3.png" class="panneau_comm" alt=""/> <div class="bas-droite"> <a href="#"> <h2 class="font-blu"> FORFAITS </h2> <h3 class="font-blu"> MILIEU COMMUNAUTAIRE </h3> </a> </div> <img src="img/Jé&Lou_Logo.png" class="logo-size-2" alt=""/> </div> </div>