在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/