When browser resize horizontally, the image shrinks

user_14685105 0
Viewed 43

When I resize the browser horizontally, the image shrinks, but i want the image to have an height of 100% in his div parent.

I can't use height because it will cause another problem, the browser resize vertically. What can i do?

Before resize: enter image description here

After resize: enter image description here

#poster {
  display: flex;
  width: 100%;
  align-items: center;
}

#poster__img {
  width: 65%;
}

#poster__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#poster__content {
  width: 35%;
  padding: 50px;
  flex-wrap: wrap;
}

#poster__content h3 {
  padding-bottom: 10px;
}
<div id="poster">
  <div id="poster__img">
    <img id="poster1" src="https://via.placeholder.com/320x240" alt="">
  </div>
  <div id="poster__content">
    <h3>Le categorie</h3>
    <p>
      <pre>
                        Concerti:
                            Questa è la nostra più grande categoria dove si possono trovare i biglietti per i concerti di tanti generi, tra cui il Pop & Rock, Jazz, Metal e anche i biglietti per i festival.
    
                        Sport:
                            Questa è la categoria per gli amanti dello sport, in cui si possono acquistare i biglietti per seguire la propria squadra del cuore in svariati sport: Calcio, Tennis, Basket, Rugby, Formula 1 e MotoGP.
                            
                        Mostre e musei:
                            Questa è la categoria per gli amanti della cultura e a chi piace l'arte in ogni sua tipologia. Abbiamo i biglietti per le mostre d'arte e di storia, nonchè anche per i musei e siti archeologici.
    
                        Teatro:
                            Questa è la categoria per chi vuole godersi uno spettacolo che potrà essere un Musical e varietà, Prosa, Teatro lirico, Cabaret, Balletto classico e moderno oppure concerti di musica classica.
                        </pre>
    </p>
    <a id="compra" href="eventi.php"><button>Acquista biglietti</button></a>
  </div>
</div>

css html
1 Answers

It's because you have align-items: center in your flex container so it prevents the image from growing to fill the height. Remove that and make your content flex instead, then you can just align the content to center:

#poster {
  display: flex;
  width: 100%;
}

#poster__img {
  width: 65%;
}

#poster__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#poster__content {
  width: 35%;
  padding: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#poster__content h3 {
  padding-bottom: 10px;
}
<div id="poster">
  <div id="poster__img">
    <img id="poster1" src="http://www.fillmurray.com/500/500" alt="">
  </div>
  <div id="poster__content">
    <h3>Le categorie</h3>
    <pre>
        Concerti:
            Questa è la nostra più grande categoria dove si possono trovare i biglietti per i concerti di tanti generi, tra cui il Pop & Rock, Jazz, Metal e anche i biglietti per i festival.

        Sport:
            Questa è la categoria per gli amanti dello sport, in cui si possono acquistare i biglietti per seguire la propria squadra del cuore in svariati sport: Calcio, Tennis, Basket, Rugby, Formula 1 e MotoGP.

        Mostre e musei:
            Questa è la categoria per gli amanti della cultura e a chi piace l'arte in ogni sua tipologia. Abbiamo i biglietti per le mostre d'arte e di storia, nonchè anche per i musei e siti archeologici.

        Teatro:
            Questa è la categoria per chi vuole godersi uno spettacolo che potrà essere un Musical e varietà, Prosa, Teatro lirico, Cabaret, Balletto classico e moderno oppure concerti di musica classica.
        </pre>
    <a id="compra" href="eventi.php"><button>Acquista biglietti</button></a>
  </div>
</div>

Also, you cannot put pre tags inside a p

user_17909820
Related