zey zey - 6 months ago 13
HTML Question

Set background image inside div stretch

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

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>