Как мне уменьшить высоту сечения

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>