當瀏覽器水平調整大小時，圖像會縮小

Question

當我水平調整瀏覽器大小時，圖像會縮小，但我希望圖像在他的 div 父級中具有 100% 的高度。

我不能使用高度，因為它會導致另一個問題，瀏覽器垂直調整大小。 我能做些什么？

調整大小之前：

調整大小后：

 #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 ea 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>

Answer 1

這是因為你有align-items: center在你的 flex 容器中，所以它可以防止圖像增長到填充高度。 刪除它並讓您的內容彎曲，然后您可以將內容對齊到中心：

 #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 ea 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>

此外，您不能將pre標簽放在p內