有一个与兄弟图像相同高度的div

Question

我试图做一个面板的响应性设计，由一个图像和另一个容器组成，内部有自己的元素，两个并排。

我有一个父div，里面有一个img和另一个div标签。这两个子标记是浮动块，宽度为%，可以工作。

问题是，当我收缩页面时，img会收缩以遵守%width规则，其高度也会收缩，并且应该保持这种方式，但是侧面的div不会将其高度更改为与同级图像相同。

我将它们包裹在另一个div中，并将内部div放在高处：100%希望这样做能起到作用，但什么也没有。

我想让右边的div根据左边的图像改变它的高度。

.img-container {
    display: block;
    width: 59%;
    float: left;
}
    
img {
    width: 100%;
}

.product-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 41%;
    float: left;
    background-color: #e4d233;
}
      
.product-img {
    width: 45%
}

<div class="imgProductContainer">
	<div class="img-container">
		<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
	</div>
	<div class="product-container">
		<img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
		<p><span id="product2Name"></span><br>
		<span>2.00 €</span></p>
	</div>
</div>

Answer 1

您可以使用CSS Grid强制容器的高度相等：

.img-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    
img {
    width: 100%;
}
.imgProductContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.product-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #e4d233;
}
      
.product-img {
    width: 100%;
}

<div class="imgProductContainer">
	<div class="img-container">
		<img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png"/>
	</div>
	<div class="product-container">
		<img id="product2Img" class="productImg" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
		<p><span id="product2Name"></span><br>
		<span>2.00 €</span></p>
	</div>
</div>

Answer 2

.imgProductContainer {
  display: flex;
  flex-direction: row;
  /*
    justify-content: center;
    align-items: center;
  */
}

.img-container {
  width: 59%;
}

img {
  width: 100%;
}

.product-container {
  width: 41%;
  background-color: #e4d233;
}

.product-img {
  width: 45%
}

<div class="imgProductContainer">
  <div class="img-container">
    <img src="http://pngimg.com/uploads/running_shoes/running_shoes_PNG5815.png" />
  </div>
  <div class="product-container">
    <img id="product2Img" class="product-img" src="http://pluspng.com/img-png/png-gym-shoes-shoe-away-hunger-is-a-partnering-program-where-footwear-is-turned-around-to-provide-an-eco-friendly-means-of-support-for-our-feeding-the-futures-programs-520.png">
    <p><span id="product2Name"></span><br>
      <span>2.00 €</span></p>
  </div>
</div>