缩放图像以完全覆盖视口的宽度和高度，但保留其未剪切并添加滚动条[关闭]

Question

我想按比例缩放图像，以便一个尺寸为视口的 100%，另一个尺寸大于视口，但不裁剪它，而是在较大的方向上添加滚动条。它需要处理具有不同纵横比以及在视口上具有不同纵横比的图像。

我尝试设置 min-width: 100vw 和 min-height: 100vh。当视口大于图像的像素尺寸时，此功能有效，但当视口尺寸小于图像的像素尺寸时，此功能无效。（代码中的图像是600x400px。全页运行代码片段，然后拖动小于600px宽和400px高的浏览器窗口，可以看到图像的缩放与视口不匹配。）

我也尝试过背景图像，但随后图像被裁剪，没有滚动条。

既然代码几乎可以工作，应该有一个简单的修复方法，还是我需要以其他方式解决它？

html {
 width: 100%;
 margin: 0;
}
.full-plus {
 width: 100vw;
 height: 100vh;
}
.full-plus img {
 min-width: 99vw;
 min-height: 99vh;
}

<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <div class="full-plus">
   <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
  </div>
 </body>
</html>

Answer 1

它需要处理不同长宽比的图像。

@AHaworth 是对的 - 你需要 JS 来：

检查并比较图像的原始尺寸
检查并比较视口的尺寸

工作示例：

const bgImage = document.querySelector('.bgImage');

const resizeDiv = () => {
  
  const imageDimensions = {
    width: bgImage.naturalWidth,
    height: bgImage.naturalHeight
  }

  switch (true) {
    case ((imageDimensions.width > window.innerWidth) && (imageDimensions.height > window.innerHeight)):
    case ((imageDimensions.width < window.innerWidth) && (imageDimensions.height < window.innerHeight)):
      if (window.innerWidth < window.innerHeight) {
        bgImage.style.setProperty('width', 'auto');
        bgImage.style.setProperty('height', '100vh');
      } else {
        bgImage.style.setProperty('width', '100vw');
        bgImage.style.setProperty('height', 'auto');
      }
      break;
    
    case ((imageDimensions.width > window.innerWidth) && (imageDimensions.height < window.innerHeight)):
      bgImage.style.setProperty('width', 'auto');
      bgImage.style.setProperty('height', '100vh');
      break;
    
    case ((imageDimensions.width < window.innerWidth) && (imageDimensions.height > window.innerHeight)):
      bgImage.style.setProperty('width', '100vw');
      bgImage.style.setProperty('height', 'auto');
      break;  
  }
}

window.addEventListener('resize', resizeDiv);

resizeDiv();

body {
 margin: 0;
}

.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

<div>
  <img class="bgImage" src="https://www.w3schools.com/w3css/img_lights.jpg" alt="Northern Lights" />
</div>

缩放图像以完全覆盖视口的宽度和高度，但保留其未剪切并添加滚动条[关闭]

问题描述投票：0回答：1

1个回答

最新问题

缩放图像以完全覆盖视口的宽度和高度，但保留其未剪切并添加滚动条[关闭]

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1