Question

当我应用border-radius属性时，它在角落和顶部显示出一些间隙。仅当图像大于外部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-style

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

图像无法充满整个区域

1 个答案: