0

我有这个简单的 html 显示图像。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Image Object Fit</title>
  <style>
    body {
      margin: 0;
      width: 100vw;
      height: 100vh;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  </style>
</head>

<body>
  <img src="https://placekitten.com/200/300" alt="" />
</body>

</html>

https://jsbin.com/hapoqog/edit?html，输出

img 元素具有不同的属性：width,height,offsetWidth,offsetHeight,naturalWidth,naturalHeight但它们都不能正确给出渲染图像的尺寸。

如何计算渲染图像的宽度、高度和比例/缩放？

4

1 回答 1

0

根据规格

被替换的内容被缩放以保持其纵横比，同时适合元素的内容框。

因此，您必须同时考虑图像的纵横比(iAR) 和容器元素内容框 (ctAR)的纵横比。

如果图像的纵横比>内容框的纵横比，则渲染的图像宽度会占用所有可用空间。

如果图像的纵横比<内容框的纵横比，则渲染的图像高度会占用所有可用空间。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Image Object Fit</title>
  <style>
    body {
      margin: 0;
      width: 100vw;
      height: 100vh;
    }
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  </style>
</head>

<body>
  <img src="https://placekitten.com/200/300" alt="" />
</body>
<script>
let img = document.querySelector("img");
img.onload = (e) => {
  let { width, height, naturalWidth, naturalHeight } = img;
  let iAR = naturalWidth / naturalHeight;
  let ctAR = width / height;
  let [w, h] =  iAR >= ctAR ? [width, width / iAR] : [height * iAR, height];
  let s = w / naturalWidth;
  console.log(w, h, s); // rendered width,height and scale
};
</script>
</html>

于 2022-01-20T14:39:08.110 回答