Estoy tratando de llenar un div con una imagen que cambia cada 3 segundos. Estoy usando este código 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";

El código HTML tiene este aspecto.

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

¿Cómo puedo estirar / recortar estas imágenes para que llenen todo el div?

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

}
1
Kevin Tinnemans 4 dic. 2016 a las 23:54
 – 
G-Cyrillus
5 dic. 2016 a las 00:00

1 respuesta

La mejor respuesta

CSS es mejor para eso, porque el cambio de tamaño de la pantalla se maneja automáticamente.

  1. Si no necesita ser compatible con IE, use object-fit: cover con object-position .
  2. Si necesita admitir IE, coloque las imágenes como fondo <div> y use background-size: cover con background-position.

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

Usando 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%;
}
<div id="banner"></div>
3
Ori Drori 5 dic. 2016 a las 00:45
Déjame hacerlo aún más extraño: funciona en Edge. Todos saludan al navegador de cabras, por supuesto
 – 
Kevin Tinnemans
5 dic. 2016 a las 00:38
Gracias, eso sería genial
 – 
Kevin Tinnemans
5 dic. 2016 a las 00:41
Juro por Jon Skeet que mi cromo está jodido. Simplemente repite la misma imagen. incluso si uso la propiedad background-repeat. Mientras Edge lo muestra correctamente
 – 
Kevin Tinnemans
5 dic. 2016 a las 00:49
Fue mi bloqueador de anuncios. Lo arreglé ahora. Eres una leyenda Ori :)
 – 
Kevin Tinnemans
5 dic. 2016 a las 00:53