如何减少部分的高度

Question

我正在处理自己的作品集，其中，我使用网格形式的图像。 不幸的是，保存这些图像的部分占用了大量垂直空间。 有人可以告诉我如何减小截面的高度吗？

我尝试更改父元素的高度，但无济于事。

.meals-showcase {
  list-style: none;
  width: 100%;
  /*height: 100%;*/
}

.meals-showcase li {
  display: block;
  float: left;
  width: 50%;
}

.meal-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.meal-photo img {
  opacity: 0.7;
  width: 100%;
  height: auto;
  transform: scale(1.15);
  transition: transform .5s, opacity .5s;
}

.meal-photo img:hover {
  opacity: 1;
  transform: scale(1.04);
}

<section class="section-hobbies">
  <ul class="meals-showcase">
    <li>
      <figure class="meal-photo">
        <img src="resources/css/img/1.jpg">
      </figure>
    </li>

    <li>
      <figure class="meal-photo">
        <img src="resources/css/img/2.jpg">
      </figure>
    </li>
  </ul>

  <ul class="meals-showcase">
    <li>
      <figure class="meal-photo">
        <img src="resources/css/img/3.jpg">
      </figure>
    </li>

    <li>
      <figure class="meal-photo">
        <img src="resources/css/img/4.jpg">
      </figure>
    </li>
  </ul>
</section>

Answer 1

默认情况下，父元素会根据子元素的高度进行调整。因此， 只需降低图像的高度，即可自动降低其父代的高度。

.meals-showcase {
  list-style: none;
  width: 100%;
  /*height: 100%;*/
}

.meals-showcase li {
  display: block;
  float: left;
  width: 50%;
}

.meal-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  height: 300px; /* give a height to it */
}

.meal-photo img {
  opacity: 0.7;
  width: 100%;
  height: auto;
  transform: scale(1.15);
  transition: transform .5s, opacity .5s;
}

.meal-photo img:hover {
  opacity: 1;
  transform: scale(1.04);
}

<section class="section-hobbies">
  <ul class="meals-showcase">
    <li>
      <figure class="meal-photo">
        <img src="https://picsum.photos/200/300">
      </figure>
    </li>

    <li>
      <figure class="meal-photo">
        <img src="https://picsum.photos/200/300">
      </figure>
    </li>
  </ul>

  <ul class="meals-showcase">
    <li>
      <figure class="meal-photo">
        <img src="https://picsum.photos/200/300">
      </figure>
    </li>

    <li>
      <figure class="meal-photo">
        <img src="https://picsum.photos/200/300">
      </figure>
    </li>
  </ul>
</section>