如何防止圖像溢出 flex-grow-1 項目？
[英]How to prevent image overflowing flex-grow-1 item?
問題描述
嗨，我的圖像有問題。
我有3個部分：
標題
IMG + 其他（主要部分）
按鈕
現在...我必須將圖像高度設置為最大高度：容器大小的 100%。 這個容器有來自 bootstrap flex-grow-1 的類來填充部分之間的空白空間。 問題是圖像在此部分溢出。 請問這個問題怎么解決？
沙盒： https : //codesandbox.io/s/polished-browser-d5qrr? file =/ index.html & fbclid = IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH- 4UB8QIbPdb_hZKL1G0
這是我必須做的，但現在圖像溢出，所以我將其隱藏。 寬度可能小於容器寬度的 100%。 比例高度：寬度應與原始圖像中的比例相同。
2 個解決方案
解決方案1
1 2020-11-10 16:55:42
我刪除（我認為）所有引導程序類以獲得“簡單代碼”。 這是我已經實現的。
編輯：為了獲得 1 列，我添加了flex-direction: column; 到.bigDiv 。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" /> <style> html, body { height: 100%; } .bigDiv { max-width: 800px; max-height: 400px; width: 70%; height: 60%; border: 4px solid red; display: flex; flex-direction: column; } img { max-width: 100%; max-height: 100%; } .div2 { border: 2px solid green; min-height: 0; } </style> <title>Document</title> </head> <body> <div class="bigDiv"> <div class="div1"> <h1>Nadpis</h1> </div> <div class="div2"> <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1" alt="img" /> </div> <div class="div3"> <button class="btn btn-primary">Dalej</button> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous" ></script> </body> </html>
解決方案2
1 2020-11-10 17:07:16
這樣做的正確答案是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
html,body{
height: 100%;
}
.custom-container{
max-width:800px;
max-height:400px;
width:70%;
height:60%;
border: 2px solid red;
}
.mid{
border:2px solid green;
min-height:0;
}
img{
max-height:100%;
max-width: 100%;;
}
#problem{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
<div class="custom-container d-flex flex-column">
<div class="top">
<h1>Nadpis</h1>
</div>
<div class="mid flex-grow-1 d-flex">
<div id="problem" class="w-100" >
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&nofb=1" alt="img">
</div>
</div>
<div class="bottom">
<button class="btn btn-primary">Dalej</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 5 - 使用 flex-grow-1 class 使 div 可滾動
[英]Bootstrap 5 - Make div with flex-grow-1 class scrollable
里面有桌子時如何防止彈性物品溢出其容器
[英]How to prevent a flex item from overflowing its container when there's a table inside
如何將圖像放大/縮小到與其彈性項目兄弟相同的高度？
[英]How can I grow/shrink an image to the same height as its flex item sibling?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.