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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您使用css将图像设置为背景，这可能会有所帮助：

.sliderContent .item { background-size:cover;}

如何调整图像大小以适应div

2 个答案:

Fiddle