如何将 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 容器