请帮助我。.我的内容产品尺寸有问题。我想制作一些食物网格,但网格尺寸不一样。.我希望将其固定为相同的尺寸,并且在移动设备上看起来也不错..plis帮帮我
.product-grid4, .product-grid4 .product-image4 {
position: relative
}
.product-grid4 {
font-family: Poppins,sans-serif;
text-align: center;
border-radius: 5px;
overflow: hidden;
z-index: 1;
transition: all .3s ease 0s
}
.product-grid4:hover {
box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.product-grid4 .product-image4 a {
display: block
}
.product-grid4 .product-image4 img {
width: 100%;
height: auto
}
.product-grid4 .pic-1 {
opacity: 1;
transition: all .5s ease-out 0s
}
.product-grid4 .product-discount-label, .product-grid4 .product-new-label {
color: #fff;
background-color: #16a085;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
line-height: 45px;
height: 45px;
width: 45px;
border-radius: 50%;
position: absolute;
left: 10px;
top: 15px;
transition: all .3s
}
.product-grid4 .product-discount-label {
left: auto;
right: 10px;
background-color: #d7292a
}
.product-grid4 .product-content {
padding: 25px
}
.product-grid4 .title {
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
margin: 0 0 7px;
transition: all .3s ease 0s
}
.product-grid4 .title a {
color: #222
}
.product-grid4 .price {
color: #16a085;
font-size: 17px;
font-weight: 700;
margin: 0 2px 15px 0;
display: block
}
.product-grid4 .price span {
color: #909090;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
text-decoration: line-through;
text-align: left;
vertical-align: middle;
display: inline-block
}
.product-grid4 .add-to-cart {
border: 1px solid #16a085;
display: inline-block;
padding: 10px 20px;
color: #fff;
background: #16a085;
font-weight: 600;
font-size: 14px;
border-radius: 4px;
transition: all .3s
}
@media only screen and (max-width:990px) {
.product-grid4 {
margin-bottom: 30px
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic1.jpg">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Burger Bosku</h3>
<div class="price">
RM 10.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic2.jpg">
</a>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Pasta Special</h3>
<div class="price">
RM 15.00
<span>RM 30.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic4.jpg">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">10%</span>
</div>
<div class="product-content">
<h3 class="title"><a href="#">Pizza Pizzi</a></h3>
<div class="price">
RM 9.00
<span>RM 10.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="pic-1" src="img/pic7.jpg">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title">Sweet Food</h3>
<div class="price">
RM 18.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
</div>
</div>
<hr>
我该如何解决。.我认为它与CSS有关,但我不知道我必须更改什么。请帮助我。
答案 0 :(得分:0)
如果您希望所有图像的大小均相同,请尝试将以下内容添加到CSS
.pic-1 {
min-height:100px
}
答案 1 :(得分:0)
我已经更新了flex列以对齐相等的高度。我只是为您的课程.product-grid4 .product-image4 img
设置了最小高度。您可以根据需要调整最小高度。
.product-grid4,
.product-grid4 .product-image4 {
position: relative
}
.product-grid4 {
font-family: Poppins, sans-serif;
text-align: center;
border-radius: 5px;
overflow: hidden;
z-index: 1;
transition: all .3s ease 0s;
margin-bottom:30px;
}
.product-grid4:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, .2)
}
.product-grid4 .product-image4 a {
display: block
}
.product-grid4 .product-image4 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-grid4 .pic-1 {
opacity: 1;
transition: all .5s ease-out 0s
}
.product-grid4 .product-discount-label,
.product-grid4 .product-new-label {
color: #fff;
background-color: #16a085;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
line-height: 45px;
height: 45px;
width: 45px;
border-radius: 50%;
position: absolute;
left: 10px;
top: 15px;
transition: all .3s
}
.product-grid4 .product-discount-label {
left: auto;
right: 10px;
background-color: #d7292a
}
.product-grid4 .product-content {
padding: 25px
}
@media (min-width: 501px) {
.product-grid4 .product-image4 img {
min-height: 330px;
}
}
@media (min-width:991px) {
.product-grid4 .product-image4 img {
min-height: 260px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/350x350">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Burger Bosku</h3>
<div class="price">
RM 10.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/550x150">
</a>
<span class="product-discount-label">50%</span>
</div>
<div class="product-content">
<h3 class="title">Pasta Special</h3>
<div class="price">
RM 15.00
<span>RM 30.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/350x350">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">10%</span>
</div>
<div class="product-content">
<h3 class="title"><a href="#">Pizza Pizzi</a></h3>
<div class="price">
RM 9.00
<span>RM 10.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 d-flex align-items-stretch">
<div class="product-grid4">
<div class="product-image4">
<a href="#">
<img class="img-fluid" src="https://via.placeholder.com/350x150">
</a>
<span class="product-new-label">New</span>
<span class="product-discount-label">20%</span>
</div>
<div class="product-content">
<h3 class="title">Sweet Food</h3>
<div class="price">
RM 18.00
<span>RM 20.00</span>
</div>
<button class="add-to-cart" data-toggle="modal" data-target="#modalCart">+ Add To Cart</button>
</div>
</div>
</div>
</div>
</div>