如何通过引导程序删除项目显示弹性盒设计下的额外空间[重复]
Posted
技术标签:
【中文标题】如何通过引导程序删除项目显示弹性盒设计下的额外空间[重复]【英文标题】：how delete extra spase under item display flex box design by bootstrap [duplicate] 【发布时间】：2021-09-26 12:07:00 【问题描述】：我通过 bootstarp 设计了这个部分，并且显示是 flex 的。但是我在某些项目下有很多额外的空间：
现在我想像这样删除项目下的额外空间：
较小的物品与较大的物品尺寸相同，因此会产生大量额外空间。
#portfolid
padding: 60px 0;
#portfolid .portfolid-item
margin-bottom: 30px;
height: 100%;
align-items: center;
#portfolid .portfolid-item .portfolid-overlay
position: absolute;
bottom: -25px;
width: 90%;
height: 85px;
right: 20px;
left: 20px;
background-color: rgba(255, 255, 255, .9);
padding: 15px;
opacity: 0;
visibility: hidden;
transition: all .4s ease-in-out;
#portfolid .portfolid-item:hover .portfolid-overlay
bottom: 15px;
opacity: 1;
visibility: visible;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolid</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<!-- Portfolid -->
<section id="portfolid">
<div class="container">
<div class="row">
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
<img src="https://s4.uupload.ir/files/portfolio-1_j0pd.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
<img src="https://s4.uupload.ir/files/portfolio-2_4m83.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
<img src="https://s4.uupload.ir/files/portfolio-3_xdlg.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
<img src="https://s4.uupload.ir/files/portfolio-4_4ogv.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
<img src="https://s4.uupload.ir/files/portfolio-5_l6n.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
<img src="https://s4.uupload.ir/files/portfolio-6_694s.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
<img src="https://s4.uupload.ir/files/portfolio-7_oxqo.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
<img src="https://s4.uupload.ir/files/portfolio-8_xn4.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
<img src="https://s4.uupload.ir/files/portfolio-9_xqw3.jpg" style="width: 100%;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>【问题讨论】：
简而言之，您应该：而不是 img 元素，将图像放在其父 div 的 background-image 属性中。那个 div 还应该有 background-size: contains 和 background-repeat: no-repeat。此外，所有的 div 应该是方形的，相同的宽度和高度。否则，如果你想保持他们的高度，你可以满足他们的背景。我没有看到其他解决方案。 【参考方案1】：您可以通过使图像高度覆盖容器的 100% 高度来做到这一点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolid</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-
B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
</head>
<body>
<!-- Portfolid -->
<section id="portfolid">
<div class="container">
<div class="row">
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
<img src="https://s4.uupload.ir/files/portfolio-1_j0pd.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
<img src="https://s4.uupload.ir/files/portfolio-2_4m83.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
<img src="https://s4.uupload.ir/files/portfolio-3_xdlg.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 app">
<img src="https://s4.uupload.ir/files/portfolio-4_4ogv.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
<img src="https://s4.uupload.ir/files/portfolio-5_l6n.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
<img src="https://s4.uupload.ir/files/portfolio-6_694s.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
<img src="https://s4.uupload.ir/files/portfolio-7_oxqo.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 web">
<img src="https://s4.uupload.ir/files/portfolio-8_xn4.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
<div class="portfolid-item col-lg-4 col-md-6 col-sm-12 cart">
<img src="https://s4.uupload.ir/files/portfolio-9_xqw3.jpg" style="width: 100%; height: 100%;;">
<div class="portfolid-overlay">
<div class="row">
<!-- content -->
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
此外，如果您不希望图像被拉伸，请使用 obect-fit 属性并选择要在该容器中显示的百分比
object-fit
和
object-position
参考访问：https://www.w3schools.com/css/css3_object-fit.asp和https://www.w3schools.com/cs-s-ref/css3_pr_object-position.asp
【讨论】：
这会使图片失去比例 你应该使用object-fit和object-position属性来调整比例 现在更像了。以上是关于如何通过引导程序删除项目显示弹性盒设计下的额外空间[重复]的主要内容，如果未能解决你的问题，请参考以下文章