[英]Bootstrap 4 Grid Row - Images Not Aligning Vertically
我有一排圖像由於某種原因沒有垂直對齊。 如果我使用所有相同的圖像,它看起來很好,但如果我用尺寸略有不同的不同圖像替換它就不起作用。 下面是一個示例:
這是我的 HTML 代碼..注意我正在使用一些自定義 CSS 進行疊加,不確定這是否會導致問題
<div className="container">
<div className="row">
<div className="col-xl-12 mx-auto mb-3">
<h2 className="abouthead">Portfolio</h2>
</div>
</div>
<div className="row">
<div className="col-lg-4 col-md-12 mb-4">
<div
className="view overlay hm-black-strong"
data-toggle="modal"
data-target="#modal1"
>
<img
src="http://localhost:3002/images/dealmazing.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">Deals Website</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-12 mb-4">
<div
className="view overlay hm-black-strong"
data-toggle="modal"
data-target="#modal2"
>
<img
src="http://localhost:3002/images/crypto-portal.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">
Cryptocurrency Portal
</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
<div className="col-lg-4 col-md-12 mb-4">
<div className="view overlay hm-black-strong">
<img
src="http://localhost:3002/images/dealmazing.JPG"
className="img-fluid"
alt="sample"
/>
<div className="p-2 bg-info text-white">Deals Website</div>
<div className="mask flex-center">
<p className="white-text">View Project</p>
</div>
</div>
</div>
</div>
//CSS
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.3/css/mdb.min.css);
.hm-gradient {
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
.darken-grey-text {
color: #2E2E2E;
}
您是否嘗試過為圖像指定高度? 然后應用Object-Fit CSS屬性。
img {
object-fit: cover;
width: 400px;
height: 400px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.