title: Contain image size with parent <div>
body: <p>I´ve been trying to keep my images next to each other on the same line, and just crop them to a smaller size if needed. Why doesn't <code>object-fit</code> work ? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="gallery"&gt;
    &lt;div class="inner"&gt;&lt;img src="images/image1.jpg"&gt;&lt;/div&gt;
    &lt;div class="inner"&gt;&lt;img src="images/image2.jpg"&gt;&lt;/div&gt;
    &lt;div class="inner"&gt;&lt;img src="images/image3.jpg"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.gallery{
    width: 1000px;
    height: 300px;
    display: flex;
  }
  
  .inner{
     width: 333px;
     height: 300px;
  }
  
  .inner img{
     object-fit: contain;
  }
  </code></pre>