javascript - 如何使用 JavaScript 拉伸(stretch)图像以填充 div

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>

我怎样才能拉伸(stretch)/裁剪这些图像，使它们填满整个 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，请将图像放置为 <div>背景，并使用 background-size: cover 与 background-position .

---

使用 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%;
}

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