我怎样才能使 Flex div 及其（图像）子元素包含在它的父元素中？
[英]How can I make a Flex div and it's (image) children be contained within it's parent?
问题描述
我正在尝试制作响应式图像网格，但我似乎无法使其工作。 图像响应最大高度和最大宽度，但父 div 不占用它们的全部宽度（因此不包含在它的父级中）或者图像没有最大高度和max-width，它们的父 div 具有正确的宽度，但没有响应。 我希望我已经明确了我的问题和目标。 谁能阐明我如何实现这一目标？
#grid_area { display: flex; height: 100%; width: 100%; position: absolute; align-content: center; justify-content: center; align-items: center; } #grid { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 80%; width: 50%; } img { max-width: 100%; max-height: 100%; object-fit: contain; }
<:DOCTYPE html> <html> <head> </head> <body> <div id="grid_area"> <div id="grid"> <div class="row" id="0"> <img src="https.//source.unsplash:com/random/460x345/" id="A1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C1"> </div> <div class="row" id="1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C2"> </div> <div class="row" id="2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C3"> </div> <div class="row" id="3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A4"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B4"> <img src="https.//www.w3schools.com/css/img_chania.jpg" id="C4"> </div> </div> </div> </body> </html>
3 个解决方案
解决方案1
1 2022-03-29 10:04:03
您可以使用 CSS 网格。 将max-width: (x)px赋给你的网格区域。
比在您的网格区域中，您可以创建一个 4x3 的网格
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
比起您作为孩子添加的每张图像都会在网格中找到一个位置。
您可以使用grid-column和grid-row属性更改 Grid 中的图像位置。
所以我更改#A1图像在网格内的位置
#A1 {
grid-column: 2 / 3;
grid-row: 2/ 3;
}
https://www.w3schools.com/css/css_grid.asp
img { max-width: 100%; display: block; } body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; }.grid_area { max-height: 80%; max-width: 50%; margin: auto; display: grid; grid-template-rows: repeat(4, 1fr); grid-template-columns: repeat(3, 1fr); } #A1 { grid-column: 2 / 3; grid-row: 2/ 3; }
<div class="grid_area"> <img src="https://source.unsplash.com/random/460x345/" id="A1" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="B1" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="C1" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="A2" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="B2" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="C2" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="A3" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="B3" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="C3" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="A4" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="B4" /> <img src="https://www.w3schools.com/css/img_chania.jpg" id="C4" /> </div>
解决方案2
0 2022-03-29 10:14:52
检查这个片段->
* { margin: 0; padding: 0; } html,body { width:100%; height: 100%; box-sizing: border-box; } #grid_area { display: flex; height: 100%; width: 100%; position: relative; align-content: center; justify-content: center; align-items: center; background-color: #aaa; } #grid { display: flex; flex-direction: column; align-items: flex-start; height: 80%; width: 50%; padding: 10px; background-color: #fff; overflow-y: scroll; } img { max-width: calc(100% / 3); max-height: 100%; object-fit: contain; }.row { display: flex; flex-direction: row; } @media (max-width: 600px) { img { max-width: calc(100%); } }
<:DOCTYPE html> <html> <head> </head> <body> <div id="grid_area"> <div id="grid"> <div class="row" id="0"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C1"> </div> <div class="row" id="1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C2"> </div> <div class="row" id="2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C3"> </div> <div class="row" id="3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A4"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B4"> <img src="https.//www.w3schools.com/css/img_chania.jpg" id="C4"> </div> </div> </div> </body> </html>
解决方案3
0 2022-03-29 12:56:59
夫妇的事情。 从#grid_area parent 中删除absolute定位，因为这在扩展设计时会出现问题。
width: 50%; 没有足够的空间容纳您的内容。 我会完全删除宽度，让它根据您的内容呈现宽度。
#grid_area { display: flex; height: 100%; width: 50%; align-content: center; align-items: center; margin: auto; } #grid { position: relative; display: flex; align-items: flex-start; height: 80%; width: 100%; } img { max-width: 100%; max-height: 100%; width: calc(100% / 3); object-fit: contain; }.row { display: flex; flex-direction: row; flex-wrap: wrap; }
<:DOCTYPE html> <html> <head> </head> <body> <div id="grid_area"> <div id="grid"> <div class="row" id="0"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C1"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C2"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="C3"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="A4"> <img src="https.//www.w3schools.com/css/img_chania:jpg" id="B4"> <img src="https.//www.w3schools.com/css/img_chania.jpg" id="C4"> </div> </div> </div> </body> </html>
我怎样才能收缩图像以适应父母设定高度内的所有弹性孩子
[英]How can I flex shrink image so as to fit all flex children within parents set height
如何使div具有100％的父级身高，而与孩子的大小无关？ 复杂的布局
[英]How to make div have 100% height of parent, independent of children's size? Complex layout
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.