title: In CSS, how can I combine flexbox and object-position?
body: <p>Would you have a peak at my CSS problem and see if you can help me with it?  I am quite stuck.  Embarrassingly, three-weeks stuck.</p>
  <p>In the code below, without the height, object-fit, and object-position properties, the code does what I want it to do.  It resizes the image when I change the size of the browser window.</p>
  <p>If I change it so that only a cropped portion of the image is shown by adding those properties, it does not.  When I change the size of the browser window, the image now does not resize.  Instead, it becomes further cropped.  See [Demo][1] for a visualization of the problem.</p>
  <p>Sincerely,</p>
  <p>Dante</p>
  <p>P.S.: This is for a data science project where the template will be updated with my scientific images when I can get the code to work.</p>
  <p>REFERENCES
  [1]: <a href="https://i.stack.imgur.com/l6nDm.gif" rel="nofollow noreferrer">https://i.stack.imgur.com/l6nDm.gif</a></p>
  <p>FULL CODE:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    font-family: Arial;
  }
  
  .row {
    display: -ms-flexbox;
    /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap;
    /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  .column {
    -ms-flex: 14%;
    /* IE10 */
    flex: 14%;
    max-width: 14%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
    height: 100px;
    object-fit: none;
    object-position: 50% 6%;
  }
  
  div.rowlabel1 {
    padding: 15px;
    text-align: center;
    font-size: 5vw;
  }
  
  div.desc {
    padding: 15px;
    text-align: center;
    font-size: 1vw;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" id=""&gt;
    &lt;div class="column"&gt;
      &lt;div class="rowlabel1"&gt;Test&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row" id=""&gt;
    &lt;div class="column"&gt;
      &lt;div class="rowlabel1"&gt;Test&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
    &lt;div class="column"&gt;
      &lt;div class="desc"&gt;Add a description of the image here&lt;/div&gt;&lt;img src="wedding.jpg" style="width:100%"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>