在 div stretch 内设置背景图片

Question

这是我的代码：

#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>

我想要做的是将父级 div 中的背景图像设置为拉伸。

我试过#mainwrapper .box img喜欢

position:absolute;
margin: auto;
max-width: 100%;
max-height: 100%;

但这不起作用。

Fiddle Example

Answer 1

只需将图片的宽度设置为 100%

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

Fiddle

Answer 2

或在 css 中为 div 添加 background-image。

.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;
}

如果您选择此路线，请删除 HTML 中的 <img> 标签。

Answer 3

几件事：

你不能在 span

p

在您的 img 中使用 max-width:100%（如果图像小于容器，则 width:100%）
在你的 #mainwrapper 中使用 max-width 而不是 width 来避免滚动条，容器将是 "resizable"，因此响应式工作更容易
去掉background:cover，因为你根本就没有背景

更新

在评论中为每个 OP 请求添加 object-fit。

#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>

在 div stretch 内设置背景图片

Set background image inside div stretch

html

css

image

stretch