縮小時調整 div 大小

Question

當我縮小頁面時，我有一個不會縮小的 div。 我 state 認為該 div 包含一個用於圖像的 div，它必須是父 div 寬度的 65%，以及一個用於內容的 div，它必須是父 div 寬度的 35%。 我能怎么做？

縮放 30% 的頁面

如果你看，下面的 div 已經縮小了，而上面的沒有，它保持了它的高度。 我希望他像其他人一樣縮小規模。

提前致謝！

HTML：

 #categorie { display: flex; width: 100%; } #categorieImg { width: 65%; } #categorieImg img { object-fit: cover; width: 100%; height: 100%; } #categorieContent { width: 35%; padding: 50px; display: flex; flex-direction: column; justify-content: center; } #categorieContent h3 { padding-bottom: 10px; } #categorieContent button { max-width: 200px; }

 <div id="categorie"> <div id="categorieImg"> <img src="../img/bg-poster.jpg" alt="Immagine delle categorie"> </div> <div id="categorieContent"> <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> <button class="acquistaHome">Acquista biglietti</button> </div> </div>

Answer 1

這是因為你在categorieImg div 中使用了img元素，所以categorie div 中categorieContent的大小將與最小img高度相同

如果您希望左側的img調整大小取決於右側的categorieContent大小，則需要刪除img並將其更改為background如下更新

 #categorie { display: flex; width: 100%; } #categorieImg { width: 65%; background: url('https://i.pinimg.com/originals/41/6a/12/416a12455b40de67fb2825ce9985fb7e.jpg'); background-size: cover; background-repeat: no-repeat; } /*#categorieImg img { object-fit: cover; width: 100%; max-height: 100%; }*/ #categorieContent { width: 35%; padding: 50px; display: flex; flex-direction: column; justify-content: center; } #categorieContent h3 { padding-bottom: 10px; } #categorieContent button { max-width: 200px; }

 <div id="categorie"> <div id="categorieImg"> </div> <div id="categorieContent"> <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> <button class="acquistaHome">Acquista biglietti</button> </div> </div>

您還可以添加background-position樣式以確定將顯示圖像的哪個 position