CODEWITHSUNDEEP
htmlcssimagestretch
zey
zey

Reputation: 6103

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

Upvotes: 0

Views: 738

Answers (3)

Hunter Turner
Hunter Turner

Reputation: 6904

Just set the image's width to 100%

#mainwrapper .box img {
  width: 100%;
}

Fiddle

Upvotes: 1

TechTho
TechTho

Reputation: 149

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.

Upvotes: 0

dippas
dippas

Reputation: 60573

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>

Upvotes: 2

Related Questions