图像无法充满整个区域

Question

When I'm applying border-radius property, it is showing some gap at the corner and top. This happens only when the image is larger than the outer div.

I want to fill the box and not show any space anywhere

JSFiddle Link: https://jsfiddle.net/utx37Ldn/

<div class="main-container">

<ul class="img-container">
  <li class="li-min-width" style="height:202px">
    <div class="img-div-style" style="height: 162px; border-radius: 15px; width: 162px;">
      <div class="img-box">
        <label class="img-box-label" style="height: 100%; line-height: 162;">
          <img src="https://data.whicdn.com/images/296659660/large.jpg" alt="Cat" class="img-class" style="height:auto !important; width:auto !important;"/>
          <div class="img-overlay" style="width:100% !important; height:100% !important; margin-top: 0px !important;">
            <div class="img-overlay-hover">
              <i class="fa fa-hand-o-up" style="border-radius: 0%; overflow: hidden;"></i>
            </div>
          </div>
        </label>
      </div>
    </div>
  </li>


  <li class="li-min-width" style="height:202px">
    <div class="img-div-style" style="height: 162px; border-radius: 15px; width: 162px;">
      <div class="img-box">
        <label class="img-box-label" style="height: 100%; line-height: 162;">
          <img src="https://n2.sdlcdn.com/imgs/h/f/z/YAZOLE-Quartz-Watch-Women-Watches-SDL236029623-1-6e589.jpg" alt="Flower" class="img-class" style="height:auto !important; width:auto !important;"/>
          <div class="img-overlay" style="width:100% !important; height:100% !important; margin-top: 0px !important;">
            <div class="img-overlay-hover">
              <i class="fa fa-hand-o-up" style="border-radius: 0%; overflow: hidden;"></i>
            </div>
          </div>
        </label>
      </div>
    </div>
  </li>


  <li class="li-min-width" style="height:202px">
    <div class="img-div-style" style="height: 162px; border-radius: 15px; width: 162px;">
      <div class="img-box">
        <label class="img-box-label" style="height: 100%; line-height: 162;">
          <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" alt="Flower" class="img-class" style="height:auto !important; width:auto !important;"/>
          <div class="img-overlay" style="width:100% !important; height:100% !important; margin-top: 0px !important;">
            <div class="img-overlay-hover">
              <i class="fa fa-hand-o-up" style="border-radius: 0%; overflow: hidden;"></i>
            </div>
          </div>
        </label>
      </div>
    </div>
  </li>

  <li class="li-min-width" style="height:202px">
    <div class="img-div-style" style="height: 162px; border-radius: 15px; width: 162px;">
      <div class="img-box">
        <label class="img-box-label" style="height: 100%; line-height: 162;">
          <img src="https://wallpaperbrowse.com/media/images/ff2e54f2ca5c09a877fb04d84bc562a4.jpg" alt="Flower" class="img-class" style="height:auto !important; width:auto !important;"/>
          <div class="img-overlay" style="width:100% !important; height:100% !important; margin-top: 0px !important;">
            <div class="img-overlay-hover">
              <i class="fa fa-hand-o-up" style="border-radius: 0%; overflow: hidden;"></i>
            </div>
          </div>
        </label>
      </div>
    </div>
  </li>

</ul>
</div>

Can someone help with me with what I'm doing wrong?

Answer 1

Remove .img-box-label border-radius property and add overflow: hidden; to .img-div-style

https://jsfiddle.net/gudzdanil/naz84hde/2/