如何使用JavaScript

Question

我尝试使用每3秒更换一次的图片来填充div。我正在使用此JavaScript代码：

        function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").src = images[x];
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          document.getElementById("img").src = images[x];
      }

      function startTimer() {
          setInterval(displayNextImage, 3000);
      }

      var images = [], x = -1;
      images[0] = "image1.jpg";
      images[1] = "image2.png";
      images[2] = "image3.png";

HTML代码如下所示。

<div id="banner">
    <img id="img"/>
    </div>

如何拉伸/裁剪这些图像以使它们填满整个div？

#banner {
    position: fixed;
    top: 10%;
    height:35%;
    background-color:yellow;
    left: 10%;
    width: 90%;
}
img {

}

Answer 1

CSS更适合这种情况，因为调整屏幕大小是自动处理的。

1. 如果您不需要支持IE，请将object-fit: cover与object-position一起使用。
2. 如果您需要支持IE，请将图片设置为def anunciar_imovel(request): ImageFormSet = modelformset_factory(ImagensAnuncio, form=ImagensForm, extra=3) if request.method == 'POST': anuncioForm = AnuncioForm(request.POST, request.FILES) formset = ImageFormSet(request.POST, request.FILES, queryset=ImagensAnuncio.objects.none()) if anuncioForm.is_valid() and formset.is_valid(): novo_anuncio = anuncioForm.save(commit=False) novo_anuncio.user = request.user novo_anuncio.save() for form in formset.cleaned_data: imagem = form['imagem'] photo = ImagensAnuncio(anuncio=novo_anuncio, imagem=imagem) photo.save() return render(request, 'account/index.html') else: anuncioForm = AnuncioForm() formset = ImageFormSet(queryset=ImagensAnuncio.objects.none()) return render(request, 'imoveis/anunciar.html', {'anuncioForm':anuncioForm,'formset':formset }) 背景，并将background-size: cover与background-position一起使用。

使用<div>

object-fit: cover

var images = [
    "https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg",
    "https://s-media-cache-ak0.pinimg.com/736x/92/9d/3d/929d3d9f76f406b5ac6020323d2d32dc.jpg",
    "http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg"
  ],
  x = -1;

function displayNextImage() {
  x = (x === images.length - 1) ? 0 : x + 1;
  document.getElementById("img").src = images[x];
}

function displayPreviousImage() {
  x = (x <= 0) ? images.length - 1 : x - 1;
  document.getElementById("img").src = images[x];
}

function startTimer() {
  displayNextImage();
  setInterval(displayNextImage, 3000);
}

startTimer();

#banner {
    position: fixed;
    top: 10%;
    height:35%;
    background-color:yellow;
    left: 10%;
    width: 90%;
}
#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 25%;
}

使用<div id="banner"> <img id="img" /> </div>

background-size: cover

var images = [
    "https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/30423_pets-products_january-site-flip_3-cathealth_short-tile_592x304._CB286975940_.jpg",
    "https://s-media-cache-ak0.pinimg.com/736x/92/9d/3d/929d3d9f76f406b5ac6020323d2d32dc.jpg",
    "http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg"
  ],
  x = -1;

function displayNextImage() {
  x = (x === images.length - 1) ? 0 : x + 1;
  document.getElementById("banner").style.backgroundImage = "url(" + images[x] + ")";
}

function displayPreviousImage() {
  x = (x <= 0) ? images.length - 1 : x - 1;
  document.getElementById("banner").style.backgroundImage = "url(" + images[x] + ")";
}

function startTimer() {
  displayNextImage();
  setInterval(displayNextImage, 3000);
}

startTimer();

#banner {
    position: fixed;
    top: 10%;
    height:35%;
    background-color:yellow;
    left: 10%;
    width: 90%;
    background-size: cover;
    background-position: 0 25%;
}