如何將 auto-resize 的圖像裝入一個 div 容器

問題描述

你如何將 auto-resize 的大圖像放在一個更小的寬度的 div 容器中，同時保持它的 width：height ratio？

示例：stackoverflow.com – 當圖像插入到編輯器面板上並且圖像太大而不適合頁面時，圖像將自動調整大小。

最佳解決方案

不要將明確的寬度或高度應用於圖像標籤。相反，給它：

max-width:100%;
max-height:100%;

示例：http://jsfiddle.net/xwrvxser/1/



img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

次佳解決方案

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

原來有另一種方法來做到這一點。

<img style='height: 100%; width: 100%; object-fit: contain'/>

會做這個工作。這是 CSS3 的東西。

小提琴：http://jsfiddle.net/mbHB4/7364/

第三種解決方案

目前，無法以確定性方式正確執行此操作，使用 fixed-size 映像 (如 JPEG 或 PNG 文件) 。

要按比例調整圖像大小，您必須將高度或寬度設置為”100%”，但不能同時設置。如果您同時設置為”100%”，您的圖像將被拉伸。

選擇是做高還是寬取決於您的圖像和容器尺寸：

如果您的圖像和容器都是”portrait shaped” 或”landscape shaped”(分別高於它們的寬度或寬度分別高)，那麼”%100″ 的高度或寬度都不重要。
如果您的圖像是人像，容器是風景，您必須在圖像上設置 height="100%"。
如果您的圖像是風景，容器是縱向的，您必須在圖像上設置 width="100%"。

如果您的圖像是 SVG，它是一種 variable-sized 矢量圖像格式，您可以自動進行適應容器的擴展。

您只需確保 SVG 文件在<svg> 標記中沒有設置任何這些屬性：

height
width
viewbox

導出 SVG 文件時，大多數矢量繪圖程序都會設置這些屬性，因此您每次導出時都必須手動編輯文件，或者編寫腳本來進行編輯。

第四種方案

這是一個解決方案，即使圖像提供太小或太大，無法適應 div，垂直和水平對齊您的 img 在一個 div，沒有任何拉伸。 html：

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSS：

#myDiv 
{
  height:104px;
  width:140px;
}
#myDiv img
{
  max-width:100%; 
  max-height:100%;
  margin:auto;
  display:block;
}

JQuery：

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

我希望這能幫助你們

第五種方案

使簡單！

給容器一個固定的 height，然後為其中的 img 標籤設置 width 和 max-height 。

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

不同的是，您將 width 設置為 100％不是 max-width 。

第六種方案

查看我的解決方案：http://codepen.io/petethepig/pen/dvFsA

它是用純 CSS 編寫的，沒有任何 JS 代碼。它可以處理任何大小和任何方向的圖像。

給定這樣的 HTML：

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSS 代碼將是：

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

第七種方案

您可以將圖像設置為 div 的背景，然後使用 css background-size property

background-size: cover;

它將「將背景圖像縮放到儘可能大，以使背景區域被背景圖像完全覆蓋。背景圖像的某些部分可能不在後台定位區域」-w3schools.com

第八種方案

這個解決方案不會拉伸圖像並填滿整個容器，但是它會削減一些圖像。

HTML

 <div><img src="/images/image.png"></div>

CSS

div {
  width: 100%;
  height: 10em;
  overflow: hidden;

img {
  min-width: 100%;
  min-height: 100%;

}

第九種方案

我剛剛發佈了一個 jQuery 插件，它完全符合你所需要的許多選項：

https://github.com/GestiXi/image-scale

用法：

HTML

<div class="image-container">
  <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

$(function() {
  $("img.scale").imageScale();
});

第十種方案

當圖像太小時，Thorn007 所接受的答案將不起作用。為瞭解決這個問題，我加了一個比例因子。這樣，它使圖像更大，它填充了 div 容器。

示例：

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

注意：1 /for webkit 你必須添加-webkit-transform：scale(4); -webkit-transform-origin：左上角; 在風格上 2 /比例因子為 4，您有 max-width = 400/4 = 100，max-height = 200/4 = 50 3 /一個替代方案是將 max-width 和 max-height 設置為 25％，甚至更簡單

參考文獻

How do I auto-resize an image to fit a div container

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何將 auto-resize 的圖像裝入一個 div 容器