title: responsive div containing resized image to keep aspect ratio
body: <p>I am using bootstrap to constuct a responsive menu bar containing 180*180 div, which in turn contains a 100*100 img, that i have resized to 53*53. I am a noob in terms of bootstrap, and am not advanced in the use of CSS either.
  What I want is that the div starts off as 180*180 on a large screen, and resizes keeping it's square shape, AND still maintaining the centered img (which I reckon can stay at 53*53 - but if I can make it also resize I would be very happy as we may change the image to be bigger in the future).</p>
  
  <p><a href="https://jsfiddle.net/PixelGnome/trcs0amj/3/" rel="nofollow noreferrer">Here is a fiddle of the work so far</a></p>
  
  <p>Can anyone help? I have spent hours playing with bootstrap, and looking at other examples, and my boss is starting to think I'm a moron, which I may well be, but I really want to get it working...
  here is my 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>.new-menu-item {
    text-align: center;
  }
  p {
    color: #fff;
  }
  img {
    width: 53px;
    height: 53px;
    margin-top: 40px;
    margin-bottom: 20px;
  }
  a {
    padding: 7px;
    background-color: #990000;
    display: block;
  }
  a:hover {
    background-color: #000;
  }
  a.active {
    background-color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" id="new-menu"&gt;
  
    &lt;div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item"&gt;
      &lt;a href="" class="new-menu-link"&gt;
        &lt;p&gt;
          &lt;img src="http://www.placehold.it/100x100" /&gt;
          &lt;br /&gt;Menu Item 1
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item"&gt;
      &lt;a href="" class="new-menu-link"&gt;
        &lt;p&gt;
          &lt;img src="http://www.placehold.it/100x100" /&gt;
          &lt;br /&gt;Menu Item 2
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item"&gt;
      &lt;a href="" class="new-menu-link"&gt;
        &lt;p&gt;
          &lt;img src="http://www.placehold.it/100x100" /&gt;
          &lt;br /&gt;Menu Item 3
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item"&gt;
      &lt;a href="" class="new-menu-link active"&gt;
        &lt;p&gt;
          &lt;img src="http://www.placehold.it/100x100" /&gt;
          &lt;br /&gt;Menu Item 4
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item"&gt;
      &lt;a href="" class="new-menu-link"&gt;
        &lt;p&gt;
          &lt;img src="http://www.placehold.it/100x100" /&gt;
          &lt;br /&gt;Menu Item 5
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="col col-md-2 col-sm-4 col-xs-6 new-menu-item"&gt;
      &lt;a href="" class="new-menu-link"&gt;
        &lt;p&gt;
          &lt;img src="http://www.placehold.it/100x100" /&gt;
          &lt;br /&gt;Menu Item 6
        &lt;/p&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>