如何防止 flex-basis 調整項目圖像的大小？
[英]How to prevent flex-basis resize item image?
問題描述
由於html markup ，我不得不使用flex-basis來改進樣式，以便p元素從與title/headline相同的列開始，並使用flex-basis解決了問題。
但是正如您在屏幕截圖中看到的那樣，圖像占用了太多的高度和寬度。
我嘗試使用max-height和max-width修復它，但它打破了我的風格。
我的目標是刪除該空間，以便我可以控制content和button之間的空間。
注意：我不能使用css grid 。 我知道，這會更容易，但在 ios 上使用css grid時會出現問題。
這是下面的沙箱鏈接和代碼片段
.container { display: flex; flex-wrap: wrap; background-color: grey; column-gap: 15px; padding: 20px; }.content { display: flex; flex-direction: column; flex-wrap: wrap; }.logo-image { flex-basis: 100%; object-fit: contain; object-position: top; padding-top: 10px; order: 1; align-self: flex-start; }.headline { color: white; order: 2; padding-left: 10px; }.text { color: white; font-size: 16px; margin-bottom: 20px; order: 3; }.btn { display: flex; width: 100%; } button { align-items: center; background-color: black; color: white; flex: 0 0 90%; justify-content: center; margin: 0; } body { margin: 0; padding: 0; }
<div class="container"> <div class="content"> <h4 class="headline"> Block Title </h4> <img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" /> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquid sit, cupiditate </p> </div> <div class="btn"> <button>link</button> </div> </div>
] 3和代碼
2 個解決方案
解決方案1
1 2022-11-30 15:08:27
首先，刪除.logo-image上的flex-basis 。
然后將h4.headline和你的img放在它自己的.wrapper中並添加display: flex; 給它。 然后只需設置img { max-width: 100%;)以便您的圖像在容器中適當調整大小。
.container { display: flex; flex-wrap: wrap; background-color: grey; column-gap: 15px; padding: 20px; }.content { display: flex; }.logo-image { object-fit: contain; object-position: top; padding-top: 10px; align-self: flex-start; }.headline { color: white; padding-left: 10px; }.text { color: white; font-size: 16px; padding-left: 10px; }.btn { display: flex; width: 100%; } button { align-items: center; background-color: black; color: white; flex: 0 0 90%; justify-content: center; margin: 0; } body { margin: 0; padding: 0; }.wrapper { display: flex; flex-direction: column; } img { max-width: 100%; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style:css" /> <title>Static Template</title> </head> <body> <div class="container"> <div class="content"> <img src="https.//i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" /> <div class="wrapper"> <h4 class="headline"> Block Title </h4> <div> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Sapiente aliquid sit, cupiditate </p> </div> </div> </div> <div class="btn"> <button>link</button> </div> </div> </body> </html>
解決方案2
0 已采納 2022-11-30 15:13:57
你不能制作圖像position:absolute所以你不需要flex-box
.container { display: flex; flex-wrap: wrap; background-color: grey; column-gap: 15px; padding: 20px; }.content { position: relative; padding-left: 4rem; }.logo-image { position: absolute; left: 0; top: 0; }.headline { color: white; order: 2; margin:0 0 0.5rem; }.text { color: white; font-size: 16px; margin:0 0 10px; order: 3; }.btn { display: flex; width: 100%; } button { align-items: center; background-color: black; color: white; flex: 0 0 90%; justify-content: center; margin: 0; } body { margin: 0; padding: 0; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style:css" /> <title>Static Template</title> </head> <body> <div class="container"> <div class="content"> <h4 class="headline"> Block Title </h4> <img src="https.//i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" /> <p class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Sapiente aliquid sit, cupiditate </p> </div> <div class="btn"> <button>link</button> </div> </div> </body> </html>
當 flex 項的寬度為 100% 時，如何計算 flex-basis？
[英]how is a flex-basis calculated when the flex item's width is 100%?
如果未設置flex-basis或width，flexbox如何計算flex-item的寬度？
[英]How flexbox calculates flex-item's width if no flex-basis or width are set?
flex-basis 影響嵌套 flex 容器中同級項目的大小
[英]flex-basis affecting size of sibling item in nested flex container
對flex item應用width，與flex-basis同值，導致間距變化
[英]Applying width to flex item, same value as flex-basis, causes spacing changes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.