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
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:
After resize:
#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>
If i use height on the parent and then i use height on the children, it works. But if i resize the browser vertically, all this content are shifted up and i dont want this. The only way to avoid it, is eliminate the heights, and that’s what i have done.
Can you include a working link to your image? This makes it much easier to help.
