Bootstrap squared tiles with imgs
<p>I want to create squared tiles with bootstrap col-*-* classes (for proper size) with background image and some text inside.</p>

<p>Now I use dummy block with</p>

<pre><code>margin-top: 100%
</code></pre>

<p>Followed by block with content:</p>

<pre><code>position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
</code></pre>

<p>But when I set background image for that block it becomes very ugly, so I think I should use  tag in order to properly resize image.</p>

<p>So I tried to make class like bgimage:</p>

<pre><code>width: 100%;
object-fit: cover;
</code></pre>

<p>I also set overflow: hidden to parent block, but that did not help, image became nice, but now it goes out from my block.</p>

<p>Now I have 2 questions:</p>

<ol>
<li><p>Is there a better way to set image to background in squared block to cover it?</p></li>
<li><p>How to make proper padding and margin for such blocks (top,left,bottom,right settings and no other way? need to be resized on small devices)?</p></li>
</ol>