title: Bootstrap 4: responsive pictures + cropping?
body: <p>I currently trying to learn bootstrap 4 from the scratch and was manage to deal quite ok with its limited documentation until now.</p>
  
  <p>I put initial project here: <a href="http://codepen.io/kriszap/pen/GWWvLW" rel="nofollow noreferrer">http://codepen.io/kriszap/pen/GWWvLW</a>
  I'm particularly interested in this part:</p>
  
  <pre><code>&lt;div class="col-sm-6 col-md-6 py-0 px-0 mx-0 my-0"&gt;
  &lt;img src="http://placehold.it/640x500" class="img-fluid"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to ask you for 2 simple questions:</p>
  
  <ol>
  <li><p>when I resize window below 1200px, placeholder pictures scale down as intended (img-fluid class), but I'm looking for more elegant solution, i.e. <a href="http://html.orange-idea.com/barton/portfolio/smart/" rel="nofollow noreferrer">http://html.orange-idea.com/barton/portfolio/smart/</a>
  The above example looks to be too complicated for me, but I think the are using some kind of crop method? What I like here is that the image fill <strong>100% of height</strong>. Can this be done directly in bootstrap? Would you be so kind and suggest a SIMPLE solution for a beginner? </p></li>
  <li><p>Is it a good practice to put the above image directly inside div class with columns? <code>(&lt;div class="col-xxx"&gt;)</code></p></li>
  </ol>