如何自动调整图像大小以适合“div”容器？答案

【问题标题】：How do I auto-resize an image to fit a 'div' container?如何自动调整图像大小以适合“div”容器？
【发布时间】：2011-03-03 01:07:40
【问题描述】：

如何自动调整大图像的大小，使其适合较小宽度的 div 容器，同时保持其宽高比？

示例：stackoverflow.com - 当图像被插入到编辑器面板并且图像太大而无法放入页面时，图像会自动调整大小。

【问题讨论】：

一些有趣的库，用于调整图像大小以适应容器：* plugins.jquery.com/project/myimgscale * code.google.com/p/jquery-imagefit-plugin
除了@Kevin 的回答...您还可以使用 ImageBoss 等服务按需创建所需大小的图像。将图像安装在容器上很棒，但响应式地提供图像是一种方式。
可能重复：stackoverflow.com/questions/1891857/…
@jolumg 不完全；虽然在某些解决方案中有很多重叠，但也有许多解决方案不可互换，因为一个是询问如何放大图像，而这个是要求缩小图像。

标签： html css image autoresize

【解决方案1】：

不要对图像标签应用明确的宽度或高度。相反，给它：

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

另外，height: auto; 如果您只想指定宽度。

示例：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>

【讨论】：

这不会同时缩放高度和宽度。
高度：自动；如果您只想指定宽度
这三个对我来说效果很好：img { max-width: 100%;高度：100%；适合对象：封面； }
不对图像应用显式宽度和高度的副作用是页面不会为图像保留空间，并且页面会随着图像加载而闪烁或内容可能会跳转。

【解决方案2】：

目前，对于 JPEG 或 PNG 文件等固定大小的图像，无法以确定的方式正确执行此操作。

要按比例调整图像大小，您必须将任一高度或宽度设置为“100%”，但不能同时设置。如果您将两者都设置为“100%” "，您的图像将被拉伸。

选择是做高度还是宽度取决于您的图像和容器尺寸：

如果您的图像和容器都是“纵向”或“横向”（分别比它们的宽度高，或者比它们的高度更宽），那么高度或宽度中的哪一个都无关紧要“ %100"。
如果您的图片是纵向的，而您的容器是横向的，您必须在图片上设置height="100%"。
如果您的图片是横向的，而您的容器是纵向的，您必须在图片上设置width="100%"。

如果您的图像是 SVG，它是一种可变大小的矢量图像格式，您可以自动进行扩展以适应容器。

您只需要确保 SVG 文件没有在 <svg> 标签中设置这些属性：

height
width
viewbox

大多数矢量绘图程序会在导出 SVG 文件时设置这些属性，因此您每次导出时都必须手动编辑文件，或者编写脚本来执行此操作。

【讨论】：

【解决方案3】：

我以这种方式将超链接内的图像水平和垂直居中并按比例缩放：

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

已在 Internet Explorer、Firefox 和 Safari 中进行了测试。

更多关于居中的信息是here。

【讨论】：

【解决方案4】：

这是一个解决方案，即使提供的图像太小或太大而无法放入 div，也可以在 div 中垂直和水平对齐您的 img 而不会进行任何拉伸。

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);
    }

【讨论】：

【解决方案5】：

可以将图片设置为div的背景，然后使用CSS background-size property:

background-size: cover;

它会“将背景图像缩放到尽可能大，使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内” -- W3Schools

【讨论】：

【解决方案6】：

将图像所需的高度和宽度赋予包含标签的 div。不要忘记在适当的样式标签中给出高度/宽度。

在标记中，将 max-height 和 max-width 指定为 100%。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

你可以在正确的类中添加细节。

【讨论】：

【解决方案7】：

下面的代码改编自之前的答案，并由我使用名为storm.jpg 的图像进行了测试。

这是显示图像的简单页面的完整 HTML 代码。这很完美，我在 www.resizemybrowser.com 上进行了测试。将 CSS 代码放在 HTML 代码的顶部，在头部下方。把图片代码放在你想要图片的地方。

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

【讨论】：

【解决方案8】：

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

它是用纯 CSS 编写的，没有任何 JavaScript 代码。它可以处理任何大小和任何方向的图像。

鉴于这样的 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;
}

【讨论】：

【解决方案9】：

简单地定义 div：

div.headerimg1 {
   position: absolute;
   top: 290px;
   left: 81px;
   width: 389px;
   height: 349px;
}

<div class="headerimg1">
    <img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;display:inline;">
</div>

【讨论】：

【解决方案10】：

我刚刚发布了一个 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>

JavaScript

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

【讨论】：

【解决方案11】：

让它变得简单！

给容器一个fixed height，然后对于其中的img标签，设置width和max-height。

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

不同之处在于您将width 设置为100%，而不是max-width。

【讨论】：

【解决方案12】：

解决方案很简单，只需一点数学......

只需将图像放入 div 中，然后放入您指定图像的 HTML 文件中。使用图像的像素值以百分比设置宽度和高度值，以计算精确的宽高比。

例如，假设您有一个宽度为 200 像素、高度为 160 像素的图像。您可以肯定地说宽度值将是 100%，因为它是较大的值。然后计算高度值，您只需将高度除以宽度即可得到 80% 的百分比值。在代码中它看起来像这样......

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

【讨论】：

【解决方案13】：

The accepted answer from 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>

注意事项：

对于 WebKit，您必须在样式中添加 -webkit-transform:scale(4); -webkit-transform-origin:left top;。
比例因子为 4 时，max-width = 400/4 = 100 和 max-height = 200/4 = 50
另一种解决方案是将最大宽度和最大高度设置为 25%。它甚至更简单。

【讨论】：

【解决方案14】：

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

【讨论】：

【解决方案15】：

此解决方案不会拉伸图像并填充整个容器，但会剪切一些图像。

HTML：

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

CSS：

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

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

【讨论】：

【解决方案16】：

下面是一个似乎对我有用的简单解决方案（4 步修复！！）。该示例使用宽度来确定整体大小，但您也可以将其翻转以使用高度。

将 CSS 样式应用于图像容器（例如，）
将宽度属性设置为您想要的尺寸
- 对于尺寸，使用 % 作为相对大小或自动缩放（基于图像容器或显示）
- 将px（或其他）用于静态或设置维度
将 height 属性设置为根据宽度自动调整
享受吧！

例如，

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

【讨论】：

【解决方案17】：

你必须告诉浏览器你放置它的高度：

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

【讨论】：

【解决方案18】：

编辑：以前基于表格的图像定位在 Internet Explorer 11 中存在问题（max-height 不适用于 display:table 元素）。我已将其替换为基于内联的定位，它不仅在 Internet Explorer 7 和 Internet Explorer 11 中都能正常工作，而且所需的代码也更少。

这是我对这个主题的看法。它只有在容器具有指定大小时才有效（max-width 和 max-height 似乎无法与没有具体大小的容器相处），但我以允许它的方式编写 CSS 内容要重复使用（将picture-frame 类和px125 大小类添加到您现有的容器中）。

在 CSS 中：

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

在 HTML 中：

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

演示

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

编辑：使用 JavaScript 可能进一步改进（放大图像）：

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

【讨论】：

使用这种方法有一个缺点。如果图像加载失败，alt 文本将与父容器 line-height 一起显示。如果替代文本超过一行，它会开始看起来很糟糕......

【解决方案19】：

object-fit

事实证明还有另一种方法可以做到这一点。

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

将完成这项工作。这是 CSS 3 的东西。

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

【讨论】：

这将缩放图像以完全适应容器内的较大尺寸，因此较小尺寸可能无法完全覆盖它。要裁剪较大的尺寸，请使用object-fit: cover

【解决方案20】：

我有更好的解决方案，不需要任何 JavaScript。它是完全响应的，我经常使用它。您经常需要将任何纵横比的图像适合具有指定纵横比的容器元素。并且必须让整个这件事完全响应。

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="https://via.placeholder.com/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="https://via.placeholder.com/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="https://via.placeholder.com/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="https://via.placeholder.com/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

您可以独立设置最大宽度和最大高度；图像将尊重最小的一个（取决于图像的值和纵横比）。您还可以将图像设置为根据需要对齐（例如，对于无限白色背景上的产品图片，您可以轻松地将其定位到底部中心）。

【讨论】：

【解决方案21】：

检查我的答案，Make an image responsive - simplest way -

img{
    width: 100%;
    max-width: 800px;
}

【讨论】：

【解决方案22】：

作为answered here，您也可以使用vh 单位代替max-height: 100%，如果它在您的浏览器（如Chrome）上不起作用：

img {
    max-height: 75vh;
}

【讨论】：

【解决方案23】：

最简单的方法是使用object-fit：

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

如果您使用的是 Bootstrap，只需添加 img-responsive 类并更改为

.container img{
    object-fit: cover;
}

【讨论】：

【解决方案24】：

所有提供的答案，包括接受的答案，仅在div 包装器具有固定大小的假设下起作用。所以这就是无论div包装器的大小如何做到这一点，如果您开发一个响应式页面，这将非常有用：

在你的 DIV 选择器中写下这些声明：

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

然后将这些声明放入您的 IMG 选择器中：

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

非常重要：

maxHeight 的值对于 DIV 和 IMG 选择器必须相同。

【讨论】：

【解决方案25】：

您有两种方法可以使图像具有响应性。

当图像是背景图像时。

#container{
    width: 300px;
    height: 300px;
    background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

运行它here

但是应该使用img标签来放置图像，因为它在SEO方面比background-image更好，因为你可以在alt中写keyword img 标签。因此，您可以使图像具有响应性。

当图片在img标签中时。

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
    <img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

运行它here

【讨论】：

【解决方案26】：

或者你可以简单地使用：

background-position:center;
background-size:cover;

现在图像将占据 div 的所有空间。

【讨论】：

这与调整大小无关。

【解决方案27】：

以下内容非常适合我：

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

【讨论】：

它也非常适合我。不确定在这种情况下命令如何协同工作@Chong Lip Phang，尤其是如何使用height: 99999px？我把它拆下来看看效果，水平居中失败了，所以看起来没有冗余。
@Vass height:99999px 基本上尝试在保持纵横比（宽度：自动）的同时放大图像，直到达到垂直或水平边界（最大高度或最大宽度）。我认为你也可以使用 height:200%;或宽度：999vw。
在使用网格（网格模板区域）时，我发现在我面临的情况下，在网格区域的上层 div 中包含 overflow-y: hidden; 是必要的

【解决方案28】：

一个简单的解决方案是使用Flexbox。将容器的 CSS 定义为：

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

将包含的图像宽度调整为 100%，您应该会在容器中获得一个很好的居中图像，并保留尺寸。

【讨论】：

【解决方案29】：

如果您使用的是 Bootstrap，您只需将 img-responsive 类添加到 img 标记：

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Bootstrap Images

【讨论】：

【解决方案30】：

我使用以下代码解决了这个问题：

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

【讨论】：