尽可能大地显示图像反应原生 - Javascript

在 Web 开发中，图片是一个经常用到的元素。如何让图片在页面中显示得更加美观自然是一个不容忽视的问题。本文将介绍如何使用原生 JavaScript 使图片能够尽可能大地显示，并且自然地适应不同设备的不同大小。

1. 图片自适应大小

首先，我们需要考虑让图片自适应不同大小的设备。我们可以使用如下代码：

img {
  max-width: 100%;
  height: auto;
}

这是 CSS 的一个常用技巧，它会让图片在超过容器宽度时自动缩小到容器宽度，同时保持图片的高宽比不变。

2. 图片加载完成后再显示

为了避免页面的闪烁效果，我们需要在图片加载完成后再将其显示出来。下面是一段例子代码：

function loadImage(img, src) {
  var newImg = new Image();
  newImg.onload = function() {
    img.src = src;
  };
  newImg.src = src;
}

var img = document.querySelector('img');
var src = img.getAttribute('data-src');
loadImage(img, src);

这个例子中首先定义了一个函数 loadImage，它接受两个参数 img 和 src，其中 img 表示要加载的图片元素，src 表示图片的 URL 地址。函数内部创建了一个新的 Image 对象，并在图片加载完成时调用回调函数将图片设置到相应的 img 元素上。最后，我们调用 loadImage 函数来加载图片。

3. 图片居中显示

通过CSS中position和表格相关属性再结合box-sizing以及flex属性，达到让图片即水平又垂直居中的效果。

.outer {
  display: table;
  width: 100%;
  height: 500px;
}

.inner {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}

img {
  max-width: 100%;
  height: auto;
}

对应HTML如下：

<div class="outer">
  <div class="inner">
    <div class="img-container">
      <img data-src="image.jpg" alt="Beautiful Image">
    </div>
  </div>
</div>

4. 总结

本文介绍了如何使用原生 JavaScript 实现图片的自适应大小、图片加载完成后再显示和图片居中显示等效果，以达到在页面中尽可能大地显示图片的效果。这些技巧在 Web 开发中经常用到，希望本文的介绍能够帮助到开发者们。