javascript - 图像未填满整个区域

Question

当我应用 border-radius 属性时，它在 Angular 和顶部显示了一些间隙。仅当图像大于外部 div 时才会发生这种情况。

我想填满方框而不在任何地方显示任何空格

JSFiddle 链接: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>

有人可以帮我解决我做错的事吗？

Answer 1

删除 .img-box-label border-radius 属性并添加 overflow: hidden; 到 .img-div-样式

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