在html容器宽度固定保持图片原始长宽比例的完整展示方案

在内容安全或者商品合规的检测系统中，尤其涉及到图片及视频帧，过完机器打标后部分还需要人工打标，这时候需要一眼看出原图中异常像素，就需要图片完整展示。这里翻译成技术语言就是如果我们使用的宽度和高度与图像的长宽比不成正比，图像可能会被裁剪或拉伸。

方案一：object-fit 属性

使用 object-fit 属性，它可以指定图片的内容如何适应容器的高度和宽度。有几个可选的值，例如 fill（填充整个容器，不保持比例）、contain（保持比例，缩放到适合容器）、cover（保持比例，裁剪多余部分）等。使用 object-fit 属性，它可以指定图片的内容如何适应容器的高度和宽度。有几个可选的值，例如 fill（填充整个容器，不保持比例）、contain（保持比例，缩放到适合容器）、cover（保持比例，裁剪多余部分）等。

一个🌰

HTML

<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" />

  <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" />
</section>

CSS

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

结果

方案二：通过HTML5属性 natural（naturalWidth, naturalHeight）获取图片真实尺寸，通过js和容器的宽高进行动态比例计算，也能实现图片不被压缩或者拉伸。

 

一个🌰此示例显示图像的自然、密度调整大小以及由页面的 CSS 和其他因素更改的渲染大小。

HTML

<div class="box">
  <img src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png" class="image">
</div>
<div class="output">
</div>

HTML 具有一个 400x398 像素的图像，该图像放置在一个 <div> 元素中。

CSS

.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}

.output {
  padding-top: 2em;
}

在上面的 CSS 中主要需要注意的是，用于绘制图像的容器的样式是 200px 宽，并且图像将被绘制以填充其宽度（100%）。

JavaScript

let output = document.querySelector(".output");
let image = document.querySelector("img");

window.addEventListener("load", event => {
  output.innerHTML += `Natural size: ${image.naturalWidth} x ` +
                      `${image.naturalHeight} pixels<br>`;
  output.innerHTML += `Displayed size: ${image.width} x ` +
                      `${image.height} pixels`;
});

JavaScript 代码将自然尺寸和显示尺寸转储到带有 output 类的 <div> 中。这是为了响应窗口的 load 事件处理程序，以确保在尝试检查其宽度和高度之前，确保图像可用。

结果

TIPS: 

以下一些元素也具备object-fit属性

<img> 元素，它可以用来显示图片，如果使用 object-fit 属性，它可以指定图片的内容如何适应容器的高度和宽度。

<video> 元素，它可以用来播放视频，如果使用 object-fit 属性，它可以指定视频的内容如何适应容器的高度和宽度。

<object> 元素，它可以用来嵌入多媒体或其他类型的对象，如果使用 object-fit 属性，它可以指定对象的内容如何适应容器的高度和宽度。

<svg> 元素，它可以用来创建可缩放矢量图形，如果使用 object-fit 属性，它可以指定图形的内容如何适应容器的高度和宽度。

参考链接：https://www.smashingmagazine.com/2021/10/object-fit-background-size-css/