title: Object-fit: cover is not clipping img inside 3:4 (75% padding) container inside bootstrap grid
body: <p>I have a 3:4 box that takes all sorts of images. This box is in a bootstrap grid. object-fit:cover is applied to img but seems to have absolutely no effect (no object-fit value seems to be applying at all). The images are squashing instead of clipping. In Firefox and Safari (have not tried Chrome).</p>
  <p>Is there a way to make 3:4 box that resizes with bootstrap take object-fit: cover?</p>
  <pre><code>.box {
      position: relative;
      width: 100%;
      height: 100%;
  
      overflow: hidden;
      padding-bottom: 75%;
  }
  
  .box img {
      position: absolute;
  
      padding:3px;
      margin: 0; 
  
      width: 100%;
      min-width: 100%;
      height: 100%; 
      min-height: 100%;
  
      object-fit: cover !Important; 
      object-position: 50% 50%;
  }
  
  &lt;div class=&quot;row no-gutters&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
          &lt;div class=&quot;row no-gutters&quot;&gt;
              &lt;div class=&quot;col-md-12&quot;&gt;
                  &lt;div class=&quot;box&quot;&gt;
                     &lt;img src=&quot;anysize.jpg&quot;&gt;
                  &lt;/div&gt;          
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>What do you recommend?
  Thanks!</p>