如何防止图像溢出 flex-grow-1 项目？
[英]How to prevent image overflowing flex-grow-1 item?
问题描述
Hi I have issue wizh my image.
嗨，我的图像有问题。
I have 3 sections:我有3个部分：
Header标题
IMG + other (main section) IMG + 其他（主要部分）
button按钮
Now... I have to set image heigth at maximum-height: 100% of container size.现在...我必须将图像高度设置为最大高度：容器大小的 100%。 This container has class from bootstrap flex-grow-1 to fill empty space between sections.这个容器有来自 bootstrap flex-grow-1 的类来填充部分之间的空白空间。 Problem is that image is overflowing this section.问题是图像在此部分溢出。 Please How to solve this issue?请问这个问题怎么解决？
Sandbox: https://codesandbox.io/s/polished-browser-d5qrr?file=/index.html&fbclid=IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH-4UB8QIbPdb_hZKL1G0沙盒： https : //codesandbox.io/s/polished-browser-d5qrr? file =/ index.html & fbclid = IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH- 4UB8QIbPdb_hZKL1G0
This is what I have to do but image is overflowing now so I hide it.这是我必须做的，但现在图像溢出，所以我将其隐藏。 Width could be lesser than 100% width of container.宽度可能小于容器宽度的 100%。 The ratio height:width should be same as in original image.比例高度：宽度应与原始图像中的比例相同。
2 个解决方案
解决方案1
1 2020-11-10 16:55:42
I remove (I think) all bootstrap class to obtain a "simple code".我删除（我认为）所有引导程序类以获得“简单代码”。 This is what I already achieve.这是我已经实现的。
EDIT: to obtain 1 column I add flex-direction: column;编辑：为了获得 1 列，我添加了flex-direction: column; to .bigDiv .到.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
Correct answer to do this is:这样做的正确答案是：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.