Отзывчивость при работе с изображениями разных форм - PullRequest
Новая
       7

Отзывчивость при работе с изображениями разных форм

0 голосов
/ 15 апреля 2020

Я работаю с API tmdb, и у меня проблема с возвращенными изображениями. В общем, изображения имеют одинаковую высоту (750 пикселей), однако некоторые имеют разную высоту, из-за чего моя карта выглядит иначе. Есть ли адаптивное решение в этом случае?

Fiddle:

https://jsfiddle.net/harrisonhenri/8cgpxLyo/9/

HTML: 

<body>
   <main>
      <section class="sc-AxhCb dFhnpy">
         <div class="image-container"><img src="https://image.tmdb.org/t/p/w500//tX0o4AdHpidgniTWwfzK0dNTKrc.jpg"></div>
         <div class="card-info-container">
            <div class="header"><span>Homem-Aranha: Longe de Casa</span></div>
            <div class="circle-container">
               <div class="sc-AxiKw fnmMWi">
                  <div><span>75%</span></div>
               </div>
            </div>
            <div class="details-container">
               <p class="dates">28/06/2019</p>
               <div class="details">
                  <span class="description">Peter Parker está em uma viagem de duas semanas pela Europa, ao lado de seus amigos de colégio, quando é surpreendido pela visita de Nick Fury. Convocado para mais uma missão heroica, ele precisa enfrentar vários vilões que surgem em cidades-símbolo do continente, como Londres, Paris e Veneza, e também a aparição do enigmático Mysterio.</span>
                  <div class="genres-container"><span class="genres">Ação</span><span class="genres">Aventura</span><span class="genres">Ficção científica</span></div>
               </div>
            </div>
         </div>
      </section>
      <section class="sc-AxhCb dFhnpy">
         <div class="image-container"><img src="https://image.tmdb.org/t/p/w500//8l4xndVyrDwLHgkPoBvpQlilxes.jpg"></div>
         <div class="card-info-container">
            <div class="header"><span>O Espetacular Homem-Aranha</span></div>
            <div class="circle-container">
               <div class="sc-AxiKw fnmMWi">
                  <div><span>65%</span></div>
               </div>
            </div>
            <div class="details-container">
               <p class="dates">23/06/2012</p>
               <div class="details">
                  <span class="description">Peter Parker (Andrew Garfield) é um rapaz tímido e estudioso, que iniciou há pouco tempo um namoro com a bela Gwen Stacy (Emma Stone), sua colega de colégio. Ele vive com os tios, May (Sally Field) e Ben (Martin Sheen), desde que foi deixado pelos pais, Richard (Campbell Scott) e Mary (Embeth Davidtz). Certo dia, o jovem encontra uma misteriosa maleta que pertenceu a seu pai. O artefato faz com que visite o laboratório do dr. Curt Connors (Rhys Ifans) na Oscorp. Parker está em busca de respostas sobre o que aconteceu com os pais, só que acaba entrando em rota de colisão com o perigoso alter-ego de Connors, o vilão Lagarto.</span>
                  <div class="genres-container"><span class="genres">Ação</span><span class="genres">Aventura</span><span class="genres">Fantasia</span></div>
               </div>
            </div>
         </div>
      </section>
   </main>
</body>

CSS: 

main {
  margin: 60px;
}

.ctnPWu{
    margin-bottom:40px;
    background-color:#01579b;
}
.ctnPWu nav{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    width:90%;
    margin:auto;
}
.eqWZUp{
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    height:100vh;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.eqWZUp section.form{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    width:100%;
    max-width:350px;
    background:#f0f0f5;
    padding:62px;
    border-radius:8px;
    box-shadow:0 0 100px rgba(0,0,0,0.1);
}
.eqWZUp section.form p{
    font-size:32px;
    margin-bottom:32px;
}
.eqWZUp .button{
    width:100%;
    height:60px;
    background:#e02041;
    border:0;
    border-radius:8px;
    color:#fff;
    font-weight:700;
    margin-top:16px;
    display:inline-block;
    text-align:center;
    -webkit-text-decoration:none;
    text-decoration:none;
    font-size:18px;
    line-height:60px;
    -webkit-transition:filter 0.2s;
    transition:filter 0.2s;
    cursor:pointer;
}
.fnmMWi{
    width:90px;
    height:90px;
    background-color:#116193;
    border-radius:50%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    padding:2px;
}
.fnmMWi div{
    width:84px;
    height:84px;
    border-radius:50%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    border-width:5px;
    border-style:solid;
    border-color:#05c4ce;
}
.fnmMWi span{
    font-size:23px;
    color:#05c4ce;
    font-family:Abel,sans-serif;
    font-weight:100;
    padding:15px 35px;
}
.dFhnpy{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin:40px auto;
}
.dFhnpy .image-container{
    width:30%;
}
.dFhnpy .image-container img{
    height:100%;
}
.dFhnpy .card-info-container{
    background-color:#e6e6e6;
    width:100%;
}
.dFhnpy .card-info-container .header{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    background-color:#01579b;
    min-height:80px;
    width:100%;
}
.dFhnpy .card-info-container .header span{
    padding:20px 0 0 130px;
    color:#40c4ff;
    font-size:4.5rem;
}
.dFhnpy .card-info-container .circle-container{
    margin-top:-50px;
    margin-left:20px;
}
.dFhnpy .card-info-container .dates{
    margin-top:-5%;
    padding-left:100px;
}
.dFhnpy .card-info-container .details-container{
    padding:0 30px;
}
.dFhnpy .card-info-container .details-container .details{
    padding-top:40px;
}
.dFhnpy .card-info-container .details-container .details .genres-container{
    padding-top:20px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:start;
    -webkit-justify-content:start;
    -ms-flex-pack:start;
    justify-content:start;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.mhPKu input{
    width:100%;
    height:60px;
    color:#333;
    border:1px solid #e0e0e0;
    border-radius:8px;
    padding:0 24px;
    border-radius:40px;
    background:#e0e0e0;
    color:#01579b;
    font-size:1.8rem;
}
.jZEIvw{
    margin:64px 0;
}
.jZEIvw nav{
    background-color:none;
    box-shadow:none;
}
.jZEIvw nav ul a:hover{
    background:none;
}
.jZEIvw nav ul{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.jZEIvw nav ul li{
    margin:0 10px;
}
.jZEIvw span{
    -webkit-transition:all 0.2s;
    transition:all 0.2s;
}
.jZEIvw span:hover{
    -webkit-transform:scale(2);
    -ms-transform:scale(2);
    transform:scale(2);
}
.hlYofW{
    margin:0 60px;
}
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Abel|Lato&display=swap');
*{
    margin:0;
    padding:0;
    outline:0;
    box-sizing:border-box;
}
html{
    font-size:62.5%;
}
html,body{
    height:100vh;
    background:#f0f0f5;
    -webkit-font-smoothing:antialiased;
}
.genres{
    border:1px solid #01579b;
    border-radius:16px;
    font-size:1.5rem;
    padding:4px 10px;
    margin:5px;
    background-color:#fff;
    color:#01579b;
}
.titles{
    color:#01579b;
}
hr{
    border:1px solid #40c4ff;
}
.dates{
    color:#999999;
    font-size:2rem;
}
nav{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    height:80px;
}
nav a{
    font-size:50px;
    color:#40c4ff;
}
a{
    -webkit-text-decoration:none;
    text-decoration:none;
    cursor:pointer;
}
li{
    list-style:none;
}
.description{
    color:#666666;
    font-size:1.8rem;
    font-weight:600;
}
img{
    width:100%;
    height:auto;
    vertical-align:middle;
}
@media (max-width:630px){
    html{
        font-size:50%;
    }
}

Заранее спасибо!

...