在div拉伸内设置背景图像

Question

这是我的代码：

＆＃13;

＆＃13;

    Response.Cache.SetCacheability(HttpCacheability.Public);
    Response.Cache.SetMaxAge(new TimeSpan(0, 5, 0));

＆＃13;

#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%);
}

＆＃13;

＆＃13;

＆＃13;

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

我试过<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>喜欢

#mainwrapper .box img

但它不起作用。

Fiddle Example

Answer 1

一些事情：

• p
中无法使用span标记
• 在max-width:100%中使用img（如果图片小于容器，则为width:100%）
• 在max-width width上使用#mainwrapper以避免使用滚动条，容器将“可调整大小”，因此更容易为响应而工作
• 删除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>

Answer 2

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

即可

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

Fiddle

Answer 3

或在css中添加background-image作为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;
}

如果您选择此路线，请

删除HTML中的<img>标记。