笔记大全

ps如何按照等比例尺寸缩放图片

更新时间：2023-11-22

说明

在前端开发项目中，我们通常需要对图片进行缩放以适应不同设备的屏幕大小。本文将介绍如何使用CSS中的object-fit属性和JS实现等比例缩放图片。

使用CSS Object-fit属性

Object-fit是CSS3中的属性，用来指定替换元素的内容对象应该如何适应到其使用的高度和宽度确定的框盒中。

  /* HTML */
  <img class="fit-image" src="your-image.jpg" alt="">

  /* CSS */
  .fit-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

上述代码将图片按照等比例缩放，并将其完全覆盖容器。Object-fit属性有几个可选值，可以根据具体需求设置：

fill：将图片拉伸至完全覆盖容器，失去原图宽高比例。
contain：将图片缩放至完全在容器内显示，保留原图宽高比例。
cover：将图片按照等比例缩放，并将其完全覆盖容器。
none：将图片不进行缩放，以原始尺寸显示。
scale-down：将图片进行缩放，并在能够完全显示的情况下缩小图片。

使用JS实现等比例缩放图片

在某些特殊的场景下，CSS实现无法满足我们的需求，需要使用JS实现。下面的代码展示了如何通过JS实现等比例缩放图片，并将其覆盖到容器中：

  /* 获取图片元素 */
  const img = document.querySelector('.fit-image-js');
  /* 获取图片原始宽高 */
  const originalWidth = img.naturalWidth;
  const originalHeight = img.naturalHeight;
  /* 获取容器宽高 */
  const containerWidth = img.parentElement.offsetWidth;
  const containerHeight = img.parentElement.offsetHeight;
  /* 计算图片缩放比例 */
  const widthRatio = (containerWidth / originalWidth).toFixed(2);
  const heightRatio = (containerHeight / originalHeight).toFixed(2);
  const ratio = Math.min(widthRatio, heightRatio);
  /* 应用缩放比例 */
  img.style.width = `${originalWidth * ratio}px`;
  img.style.height = `${originalHeight * ratio}px`;
  img.style.margin = 'auto';
  img.style.position = 'absolute';
  img.style.top = img.style.bottom = img.style.left = img.style.right = 0;

上述代码先获取图片元素，以及图片原始宽高和容器宽高。计算出图片需要缩放的比例，最后将其应用到图片元素上。其中，margin和position用于将图片居中，并将其完全覆盖容器。

使用JS库实现等比例缩放

除了手写JS代码外，我们还可以使用JS库来实现等比例缩放。其中，一些流行的JS库，如jQuery和React等，都提供了现成的等比例缩放组件。这里以jQuery为例，展示了如何使用jQuery实现等比例缩放图片：

  /* HTML */
  <div class="fit-image-jquery"><img src="your-image.jpg" alt=""></div>

  /* JS */
  $(window).on('resize', function() {
    const $imgContainer = $('.fit-image-jquery');
    $imgContainer.each(function() {
      const $thisImg = $(this).find('img');
      const oh = $thisImg.height();
      const ow = $thisImg.width();
      const w = $(this).width();
      const h = $(this).height();
      const r = Math.min(w / ow, h / oh);
      $thisImg.css({
        'width': `${ow * r}px`,
        'height': `${oh * r}px`,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'margin': 'auto',
        'right': 0,
        'bottom': 0
      });
    });
  });
  $(window).resize();

上述代码使用jQuery的on方法监听窗口的resize事件，在事件触发时计算图片需要缩放的比例，并将比例应用到对应的图片元素上，使其等比例缩放并完全覆盖容器。其中，find和each方法用于遍历所有的图片容器，分别进行等比例缩放操作。

c语言编程笔录