title: max-width and max-height on background image
body: <p>I want to show an background-image while hovering over the normal image. They both should have the same height and width. I thought to make it work by giving the div with the background image <code>display: inline-block</code> so it takes the same size as the image, but that makes it so the <code>width: 100%</code> and <code>height: 100%</code> of the image stop working cause they try to take 100% of the width from the <code>inline-block</code> element.</p>
  
  <p>How can I make the <code>background-image</code> the same size as the <code>image</code> while keeping the values of <code>height</code> and <code>width</code> as ..% of the <code>.box</code> div.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
    width: 500px;
    height: 400px;
    border: 1px solid black;
    text-align: center;
  }
  
  .around-image{
    background: url(http://via.placeholder.com/600x400) no-repeat center;
    background-size: cover;
    display: inline-block;
  }
  
  img{
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    width: 100%;
    opacity: 1;
    vertical-align: middle;
  }
  
  .helper{
   display: inline-block;
   height: 100%;
   vertical-align: middle;
  }   
  
  img:hover{
    opacity: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;div class="around-image"&gt;
      &lt;span class="helper"&gt;&lt;/span&gt;&lt;img src="http://via.placeholder.com/300x200"&gt;
    &lt;/div&gt;  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  <hr>
  <strong>Edit</strong><br>
  Thanks to the answer from @dbigpot I probably got a better solution which is changing the <code>background-image</code> on hover. Only problem is that I can't use the <code>max-height</code> and <code>max-width</code> on the image and I need that part of the code so my images always look good inside of the div. </p>
  
  <p>Is there anyway to set <code>max-height</code> or <code>max-width</code> on a <code>background-image</code>? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
    margin: 30px;
    width: 400px;
    height: 200px;
    border: 1px solid black;
    text-align: center;
    background: url(http://via.placeholder.com/300x200) no-repeat center;
    background-size: cover;
    position: relative;
  }
  
  .box:hover{
    background: url(http://via.placeholder.com/200x300) no-repeat center;
  }
  
  .height p{
    position: absolute;
    left: -60px;
    top: 45%;
    -webkit-transform: rotate(-90deg);
  }
  
  .width p{
    position: absolute;
    left: 40%;
    top: -40px;
    -webkit-transform: rotate(0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;div class="height"&gt;
      &lt;p&gt;height: 200px&lt;/p&gt;
    &lt;/span&gt;
    &lt;div class="width"&gt;
      &lt;p&gt;width: 400px&lt;/p&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you see, the 300x200 image is stretched over an area of 400x200. I don't want the image to stretch.</p>