Set background image inside div stretch - html

Question

Here is my code:
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
float: left;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
background-size: cover;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
width: 100%;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 200px;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">
<p>Pool</p>
</span>
</div>
</div>
What I want to do is to set background image inside parent div to stretch.
I have tried in #mainwrapper .box img like
position:absolute;
margin: auto;
max-width: 100%;
max-height: 100%;
But it doesn't work .
Fiddle Example

Answer 1

a few things:
you can't have p tag inside span
use max-width:100% in your img (or width:100% if the image is smaller than the container)
use max-width over width in your #mainwrapper to avoid scrollbars, with that the container will be "resizable", so easier to work for responsive
remove background:cover, because you don't have a background at all
UPDATE
added object-fit per OP request in comment.
#mainwrapper {
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0;
text-align: center;
max-width: 1000px;
}
/* Image Box Style */
#mainwrapper .box {
border: 2px solid #fff;
cursor: pointer;
height: 200px;
margin: 0 auto;
position: relative;
overflow: hidden;
width: 400px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
object-fit: cover;
height: 100%;
width: 100%
}
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 30px;
width: 100%;
display: block;
bottom: -30px;
line-height: 10pt;
text-align: center;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg" />
<span class="caption simple-caption">Pool</span>
</div>
<hr />
<div id="box-2" class="box">
<img id="image-2" src="//lorempixel.com/100/400" />
<span class="caption simple-caption">Pool</span>
</div>
</div>

Answer 2

Just set the image's width to 100%
#mainwrapper .box img {
width: 100%;
}
Fiddle

Answer 3

or add the background-image in css for the div.
.box {
background-image: url("http://www.sideshowtoy.com/wp-content/uploads/2016/01/marvel-deadpool-sixth-scale-hot-toys-feature-902628.jpg");
background-size:cover;
}
remove the <img> tag in your HTML if you choose this route.