html - 如何使图像调整大小以适合div

Question

现在我正在用幻灯片对我的网站进行编程。我制作了整个幻灯片，但我有一个小问题。我想要我链接的任何图像重新调整大小以适应宽度和高度，无论它是更小还是更大，我不在乎它是否保持纵横比。问题是我将 div 设置为填充页面宽度 100%，当我将图像设置为宽度 100% 和高度 100% 时，它不会改变它只是保持不变。如何缩小图像但仍显示完整图像？

HTML:

<div class="sliderContent">
     <div class="item" style="height: 280px; width:100%; z-index: 4; display: none; background: url(img/img1.png) 50% 50% no-repeat black;">
</div>

CSS:

.sliderContent {
float:left;
width:100%;
max-width: 100%;
max-height: 100%;
height:280px;
clear:both;
position:relative;
overflow:hidden;
}

#item {
max-width: 100%;
max-height: 100%; 
}

Answer 1

使用 background-size: 100% 100%。

Fiddle

.sliderContent {
  float: left;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: 280px;
  clear: both;
  position: relative;
  overflow: hidden;
}
.item {
  height: 280px;
  width:100%;
  z-index: 4;
  background: url(http://dummyimage.com/600x400/000/fff) no-repeat;
  background-size: 100% 100%;
}

<div class="sliderContent">
  <div class="item">
  </div>
</div>