max-width and max-height on background image - html

Question

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 display: inline-block so it takes the same size as the image, but that makes it so the width: 100% and height: 100% of the image stop working cause they try to take 100% of the width from the inline-block element.
How can I make the background-image the same size as the image while keeping the values of height and width as ..% of the .box div.
.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;
}
<div class="box">
<div class="around-image">
<span class="helper"></span><img src="http://via.placeholder.com/300x200">
</div>
</div>
Edit
Thanks to the answer from #dbigpot I probably got a better solution which is changing the background-image on hover. Only problem is that I can't use the max-height and max-width on the image and I need that part of the code so my images always look good inside of the div.
Is there anyway to set max-height or max-width on a background-image?
.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);
}
<div class="box">
<div class="height">
<p>height: 200px</p>
</span>
<div class="width">
<p>width: 400px</p>
</span>
</div>
As you see, the 300x200 image is stretched over an area of 400x200. I don't want the image to stretch.

Answer 1

To prevent stretching of the image just change the value of the background-size property to contain:
.box {
background-size: contain;
}
.box {
margin: 30px;
width: 400px;
height: 200px;
border: 1px solid;
text-align: center;
background: url(http://via.placeholder.com/300x200) no-repeat center;
background-size: contain;
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);
}
<div class="box">
<div class="height">
<p>height: 200px</p>
</div>
<div class="width">
<p>width: 400px</p>
</div>
</div>

Answer 2

You could try using background-size:cover
.box{
width: 500px;
height: 400px;
border: 1px solid black;
text-align: center;
}
.around-image{
background: url(http://via.placeholder.com/300x200/ff0000) 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;
}
<div class="box">
<div class="around-image">
<span class="helper"></span><img src="http://via.placeholder.com/300x200">
</div>
</div>

Answer 3

You could use something like this -
#target {
width: 200px;
height: 200px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRN_bhuF3l7rhMNNBk4lgEoOp2qnB2TAJd5h_rVGtsWzZ0K0uzs');
}
#target:hover {
background: url('http://3.bp.blogspot.com/-KdSQjJhV4jI/TpMRe96ndUI/AAAAAAAACfQ/BC6ZMvbp_DA/s1600/gerbera-elegant-flowers-9.jpg');
}
<div id="target"></div>
Adjust the background css properties to suit your need.