html css img resolution manipulation

Question

I just started working on html and css and need to understand how I can fix the below issue:

I have the following section in my html body

.section-meals {
    padding: 0;
    background-color: #f4f4f4;
}

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

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

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

.meal-photo img {
    /*
        Width 100% + height auto set to show up the entire image in a bounded area.
        This is similar to wrap content height and width in android and iOS.
    */
    width: 100%;
    height: 100%;
    /*
        Made everything bigger, but now the images are bigger than the container themselves.
        So we have to hide the overflow in the container with the property hidden.
    */
    transform: scale(1.30);
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0.6;
}

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

<section class="section-meals">
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/1.jpg" alt='passport photo'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/2.jpg" alt='world map'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/3.jpg" alt='globe in hand'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/4.jpg" alt='taj mahal'>
            </figure>
        </li>
    </ul>
    <ul class="meals-showcase clearfix">
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/5.jpg" alt='cliff with beautiful houses'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/6.jpg" alt='eiffel tower'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/7.jpg" alt='Maya bay'>
            </figure>
        </li>
        <li>
            <figure class='meal-photo'>
                <img src="resources/img/8.jpg" alt='beach'>
            </figure>
        </li>
    </ul>
</section>

Answer 1

You can use the padding top trick to give your li an aspect ratio, then use object fit to make your image fit perfectly (you will also need an ie polyfill for object fit):

body {
  margin:0;
}
.meals-showcase {
  /* reset list styles and use flex to line up in a row */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.meals-showcase>li {
  /* make li 25% width */
  max-width: 25%;
  width: 25%;
  margin: 0;
  padding: 0;
}

.meals-showcase figure {
  /* make figure into block and relative position, give this the aspect ratio - here I use 75% padding top */
  display: block;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 75% 0 0 0;
}

.meals-showcase img {
  object-fit: cover;    /* add this */
  display: block;
  position: absolute;   /* this is so it fills the figure */
  width:100%; 
  height:100%;
  top: 0;
  left: 0;
  transition: transform 0.5s;
}

.meal-photo img:hover {
  transform: scale(1.05);
}

.meals-showcase figure:hover {
  z-index:1; /* bring hover figure to front */
}

<section class="section-meals">
  <ul class="meals-showcase clearfix">
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/400/300" alt='passport photo'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/350" alt='world map'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/250/300" alt='globe in hand'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/300/300" alt='taj mahal'>
      </figure>
    </li>
  </ul>
  <ul class="meals-showcase clearfix">
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/300/400" alt='cliff with beautiful houses'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/300" alt='eiffel tower'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/400" alt='Maya bay'>
      </figure>
    </li>
    <li>
      <figure class='meal-photo'>
        <img src="https://www.fillmurray.com/200/500" alt='beach'>
      </figure>
    </li>
  </ul>
</section>