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

让它变得简单！

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

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

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

---

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

background-size: cover;

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

---

查看我的解决方案：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;
}

---

有多种方法可以使 图像 适合 <div>。

img {
    object-fit: cover;
}

CSS object-fit 属性用于指定如何调整 <img> 或 <video> 的大小以适合其容器。

该属性告诉内容以多种方式填充容器；例如“保持该纵横比”或“伸展并尽可能多地占用空间”。

填充 - 这是默认设置。调整图像大小以填充给定尺寸。如有必要，图像将被拉伸或挤压以适应

包含 - 图像保持其纵横比，但调整大小以适应给定尺寸

cover - 图像保持其纵横比并填充给定尺寸。图像将被剪裁以适合

none - 不调整图像大小

scale-down - 图像被缩小到 none 或 contains 的最小版本

您可以找到更多工作示例 here。

---

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

/* 仅适用于此演示 */ .container { max-width: 300px;边距：0 自动； } .img-frame { box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);背景：#ee0；边距：20px 自动； } /* 这适用于具有指定纵横比的响应式容器 */ .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%; } /* 这是关键部分 - 将图像定位并适合容器 */ .fit-img { position: absolute;顶部：0；右：0；底部：0；左：0；边距：自动；最大宽度：80%；最大高度：90% } .fit-img-bottom { 顶部：自动； } .fit-img-tight { 最大宽度：100%；最大高度：100% }

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

---

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

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>

JavaScript

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

---

我看到很多人建议对象匹配，这是一个不错的选择。但是，如果您希望它也可以在旧版浏览器中工作，还有另一种方法可以轻松实现。

这很简单。我采用的方法是使用绝对值将图像定位在容器内，然后使用以下组合将其放置在中心：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

一旦它在中心，我给图像，

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

这使得图像得到object-fit:cover的效果。

这是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

此逻辑适用于所有浏览器。

---

以下内容非常适合我：

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

---

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

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

---

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

---

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

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

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

---

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

img {
    max-height: 75vh;
}

---

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

#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。

---

将图像所需的高度和宽度提供给包含 标记的 div。不要忘记在正确的样式标签中给出高度/宽度。

在<img>标记，将 max-height 和 max-width 设为 100%。

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

正确后，您可以在适当的类中添加详细信息。

---

下面的代码改编自之前的答案，并由我使用名为 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>

---

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

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

---

编辑：以前基于表格的图像定位在 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>

演示

/* 主要风格 */ .picture-frame { vertical-align: top;显示：内联块；文本对齐：居中； } .picture-frame.px32 { 宽度：32px;高度：32px；行高：32px； } .picture-frame.px125 { 宽度：125px;高度：125px；行高：125px； } .picture-frame img { margin-top: -4px; /* 内联图像在使用垂直对齐定位时由于某种原因有轻微偏移 */ max-width: 100%;最大高度：100%；显示：内联块；垂直对齐：中间；边框：0； /* 删除 Internet Explorer 中锚点中图像的边框 */ } /* 其他 */ .picture-frame { padding: 5px; } .frame { 边框：1px 纯黑色； }

32px

125px

编辑：使用 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) };
});

---

图像太小时，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：左上角；在风格。如果比例因子为 4，则 max-width = 400/4 = 100 和 max-height = 200/4 = 50 另一种解决方案是将 max-width 和 max-height 设置为 25%。它甚至更简单。

---

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

将 CSS 样式应用于图像容器（例如 ） 将 width 属性设置为所需的尺寸 对于尺寸，使用 % 表示相对大小，或自动缩放（基于图像容器或显示）使用 px（或其他）一个静态的，或设置尺寸设置高度属性自动调整，基于宽度享受！

例如，

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

---

所有提供的答案（包括接受的答案）仅在 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 %) */

很重要：

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

---

最简单的方法是使用 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;
}

---

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

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

Bootstrap Images

---

正如我在 2014 年的 Codepen example 中看到的那样，我制定了一个解决方案，可以在尽可能少的 javascript 的帮助下适用于任何未知的宽度/高度（纵横比）组合，以更改图像的 CSS当容器的纵横比高于/低于图像的纵横比时居中：

尝试通过拖动右下角调整容器大小：

// 检测当前图像的窗口宽度何时过窄 // 纵横比，并将其调整为 100% 的高度而不是 100% 的宽度。 const photo = document.images[0] const onPhotoResize = new ResizeObserver(entries => window.requestAnimationFrame(checkRatio) ) onPhotoResize.observe(photo.parentNode) function checkRatio(){ const photoParent = photo.parentNode, imageAspectRatio = photo.clientWidth / photo.clientHeight, parentAspectRatio = photoParent.clientWidth / photoParent.clientHeight photo.classList[imageAspectRatio > parentAspectRatio ? 'add':'remove']('max') } .box{ width: 20%;高度：60%；边距：自动；位置：绝对；顶部：0；左：0；对：0；底部：0；调整大小：两者；溢出：隐藏；边框：5px 纯红色； } .box > img{ 位置：绝对；最高：50%；左：50%；宽度：100%；变换：翻译（-50%，-50%）； } .box > img.max{ 宽度：自动；高度：100%； }

---

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

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

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

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

---