Как получить такую ​​же высоту коробки

Question

как я могу получить отзывчивую коробку с продуктом той же высоты, когда я вставляю другой размер изображения для моего продукта из панели администратора, он показывает различную высоту коробок,

Мой CSS

/* Products Styles  */


.flex-wrap {
    display: flex;
    flex-wrap: wrap;

}

#hot h2 {
text-transform: uppercase;
font-size: 36px;
color: #4993e4;
font-weight: 100;
text-align: center;

}

#content {
padding-left:25px;

}

.single {
width:290px;
margin: auto;
}


}

@media (max-width: 768px) {

.single {

width:100;
margin: auto;
}

}

#content .product {
background:#fff;
border: solid 1px #e6e6e6;
box-sizing: border-box;
margin-bottom: 30px;
}

#content .product .text p.price {
font-size:18px;
text-align:center;
font-weight:300;

}

#content .product .text .buttons {
clear:both;
text-align:center;
}

#content .product .text h3 {
text-align:center;
font-size:20px;

}

#content .product .text h3 a {

color:rgb(85, 85, 85);
}

#content .product .text {
padding:10px 10px 0px;
}

#content .product .text .buttons .btn {
margin-bottom:10px;
}

Answer 1

Вы можете сделать свой дизайн нерушимым с коробкой продукта нестандартной высоты.

.flexlist {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  overflow: hidden;
}

.flexlist-item {
  width: calc(100% / 3 - 15px);
  margin: 0 5px 5px 0;
  background: #efefef;
  float: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
}

<ul class="flexlist">
  <li class="flexlist-item">Lorem Ipsum is simply dummy text</li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text</li>

  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy textLorem Ipsum is simply dummy text. Lorem Ipsum is
    simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text </li>
  <li class="flexlist-item">Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is
    simply dummy text. Lorem Ipsum is simply dummy text </li>
</ul>

Answer 2

это на самом деле немного хитро.

положить изображение в качестве фона элемента и сделать так, чтобы оно покрывало весь элемент:

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.box {
  padding-right: 5px;
  padding-left: 5px;
  width: 100%;
  @media (min-width: 768px) {
    width: 50%;
  }
  @media (min-width: 992px) {
    width: 33%;
  }
  @media (min-width: 1200px) {
    width: 25%;
  }
}

.box>.content {
  background-color: #fff;
  border: 1px solid #ddd;
}

.box>.content>.image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 200px; // this should be responsive :
  @media (min-width: 800px) {
    height: 150px;
  }
}

<div class="flex-wrap">
	<div class="box">
		<div class="content">
			<div class="image" style="background-image:url('https://cdn.shopify.com/s/files/1/1011/9246/products/351_78763716-fe86-4fa6-a97a-9f3b92d32120_large.jpg?v=1543489483')"></div>
		</div>
	</div>
	<div class="box">
		<div class="content">
			<div class="image" style="background-image:url('https://www.marimekko.com/media/catalog/product/cache/4/small_image/738x/040ec09b1e35df139433887a97daa66f/0/4/046563-345_10_1541563567.jpg')"></div>
		</div>
	</div>
</div>

этот подход автоматически сохраняет пропорции изображения.и размер изображения здесь не имеет значения.вам просто нужно справиться с отзывчивым стилем height.

Answer 3

Попробуйте с минимальной шириной

 @media (min-width:1025px) { 
    .global-container {
        margin-top: 0;
        background-image: none;
    }
}

Для более подробной информации см.

Answer 4

Есть много способов сделать это, так как вы использовали flexbox в своем коде, я придумал этот пример.

.box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

.box .column {
  flex: 1;
  background: #aaa;
  margin-right: 10px;
  padding: 15px;
}

<div class="box">
  <div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <div class="column">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>

Answer 5

Добавьте минимальную ширину и минимальную высоту для контейнера.