Html 如何防止图像溢出flex-grow-1项目？
嗨，我有我的形象问题 我有三个部分： 标题 IMG+其他（主要部分） 钮扣Html 如何防止图像溢出flex-grow-1项目？,html,css,bootstrap-4,Html,Css,Bootstrap 4,嗨，我有我的形象问题 我有三个部分： 标题 IMG+其他（主要部分） 钮扣 现在。。。我必须在最大高度设置图像高度：容器大小的100%。 此容器具有bootstrap flex-grow-1中的类来填充节之间的空白。问题是图像溢出了这个部分。请问如何解决这个问题 沙箱： 这是我必须做的，但现在图像溢出，所以我把它隐藏起来。宽度可以小于容器宽度的100%。高度与宽度的比率应与原始图像中的相同 我删除（我认为）所有引导类以获得“简单代码”。这是我已经取得的成就 编辑：为了获得1列，我添加了fle
现在。。。我必须在最大高度设置图像高度：容器大小的100%。 此容器具有bootstrap flex-grow-1中的类来填充节之间的空白。问题是图像溢出了这个部分。请问如何解决这个问题 沙箱： 这是我必须做的，但现在图像溢出，所以我把它隐藏起来。宽度可以小于容器宽度的100%。高度与宽度的比率应与原始图像中的相同 我删除（我认为）所有引导类以获得“简单代码”。这是我已经取得的成就 编辑：为了获得1列，我添加了
flex-direction:column到.bigDiv
html，
身体{
身高：100%；
}
比格迪夫先生{
最大宽度：800px；
最大高度：400px；
宽度：70%；
身高：60%；
边框：4倍纯红；
显示器：flex；
弯曲方向：立柱；
}
img{
最大宽度：100%；
最大高度：100%；
}
.第2分部{
边框：2倍纯绿；
最小高度：0；
}
文件
纳德皮斯
达莱杰
我删除（我认为）所有引导类以获得“简单代码”。这是我已经取得的成就
编辑：为了获得1列，我添加了flex-direction:column到.bigDiv
html，
身体{
身高：100%；
}
比格迪夫先生{
最大宽度：800px；
最大高度：400px；
宽度：70%；
身高：60%；
边框：4倍纯红；
显示器：flex；
弯曲方向：立柱；
}
img{
最大宽度：100%；
最大高度：100%；
}
.第2分部{
边框：2倍纯绿；
最小高度：0；
}
文件
纳德皮斯
达莱杰
正确的答案是：
<!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>
html，正文{
身高：100%；
}
.定制集装箱{
最大宽度：800px；
最大高度：400px；
宽度：70%；
身高：60%；
边框：2倍纯红；
}
.中{
边框：2倍纯绿；
最小高度：0；
}
img{
最大高度：100%；
最大宽度：100%；；
}
#问题{
背景色：红色；
}
文件
纳德皮斯
达莱杰
正确的答案是：
<!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>
html，正文{
身高：100%；
}
.定制集装箱{
最大宽度：800px；
最大高度：400px；
宽度：70%；
身高：60%；
边框：2倍纯红；
}
.中{
边框：2倍纯绿；
最小高度：0；
}
img{
最大高度：100%；
最大宽度：100%；；
}
#问题{
背景色：红色；
}
文件
纳德皮斯
达莱杰
我有顶部、底部和中部，正如您在html中看到的那样。我只需要用图像填充中间部分（不要溢出此部分）。在代码沙盒中，我将溢出隐藏在容器上，如果您对其进行注释，您将发现问题，并且您希望您的3个部分不会比高。自定义容器
？是。自定义容器的宽度和高度：最大宽度：800px；最大高度：400px；宽度：70%；身高：60%；这很重要，3个部分需要响应（如果你调整窗口的大小，图像可以更小）？我有顶部、底部和中间部分，你可以在html中看到。我只需要用图像填充中间部分（不要溢出此部分）。在代码沙盒中，我将溢出隐藏在容器上，如果您对其进行注释，您将发现问题，并且您希望您的3个部分不会比高。自定义容器
？是。自定义容器的宽度和高度：最大宽度：800px；最大高度：400px；宽度：70%；身高：60%；这一点很重要，3个部分需要响应（如果调整窗口的大小，图像可能会变小）？