关于html：如何自动调整图像大小以适应’div’容器？


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

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

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

相关讨论

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
img {
    max-width: 100%;
    max-height: 100%;
}

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

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

.square {
    height: 75px;
    width: 75px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Portrait Div

    <img src="http://i.stack.imgur.com/xkF9Q.jpg">


Landscape Div

    <img src="http://i.stack.imgur.com/xkF9Q.jpg">


Square Div

    <img src="http://i.stack.imgur.com/xkF9Q.jpg">

相关讨论

对象的合

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

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

会做的工作。这是CSS3的东西。

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

相关讨论

目前，无法以确定的方式正确地执行此操作，使用固定大小的图像(如JPEG或PNG文件)。

要按比例调整图像大小，您必须将高度或宽度设置为"100％"，而不是两者都设置。如果将两者都设置为"100％"，则图像将被拉伸。

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

  • 如果您的图像和容器都是"纵向形状"或两者都是"横向形状"(分别高于它们的宽度，或者比它们的高度宽)，那么高度或宽度中的哪一个都是"％100"无关紧要。
  • 如果您的图像是纵向，并且容器是横向的，则必须在图像上设置height="100%"。
  • 如果您的图像是横向图像，而容器是纵向图像，则必须在图像上设置width="100%"。

    • 如果您的图像是SVG(可变大小的矢量图像格式)，则可以使扩展适合容器自动发生。

    您只需确保SVG文件在标记中没有设置这些属性：

    1
    2
    3
    height
    width
    viewbox

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

    相关讨论

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

    HTML内容：

    1
      <img alt="Client Logo" title="Client Logo" src="Imagelocation" />

    CSS内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #myDiv
    {
      height: 104px;
      width: 140px;
    }
    #myDiv img
    {
      max-width: 100%;
      max-height: 100%;
      margin: auto;
      display: block;
    }

    jQuery部分：

    1
    2
    3
    4
    5
    var logoHeight = $('#myDiv img').height();
        if (logoHeight < 104) {
            var margintop = (104 - logoHeight) / 2;
            $('#myDiv img').css('margin-top', margintop);
        }
    相关讨论

    简单一点！

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

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

    区别在于您将width设置为100％，而不是max-width。

    相关讨论

    一个美丽的黑客。

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

  • When an image is a background image.
    • 1
    2
    3
    4
    5
    6
    7
    8
    #container{
        width: 300px;
        height: 300px;
        background-image: url(http://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;
    }

    在这里运行它

    但是，由于你可以在IMG标签的alt中编写关键字，所以应该使用IMG标签来放置图像，因为它优于background-image。所以这里是你可以使图像响应。

  • When image is in img tag.
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #container{
        max-width: 400px;
        overflow: hidden;
    }
    img{
        width: 100%;
        object-fit: contain;
    }


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

    在这里运行它

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

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

    给出这样的HTML：

    1
      <img src="http://placekitten.com/415/200"/>

    CSS代码将是：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .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属性：

    1
    background-size: cover;

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

    相关讨论

    此解决方案不会拉伸图像并填充整个容器，但会切割部分图像。

    HTML：

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

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
        width: 100%;
        height: 10em;
        overflow: hidden;

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

    我刚刚发布了一个jQuery插件，可以通过很多选项完全满足您的需求：

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

    用法：

    HTML

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

    JavaScript的

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

    以下适用于我：

    1
    2
    3
    4
    5
    6
    7
    8
    img{
       height: 99999px;
       object-fit:contain;
       max-height: 100%;
       max-width: 100%;    
       display: block;
       margin: auto auto;
    }

    我有更好的解决方案，无需任何JavaScript。它完全响应，我经常使用它。您经常需要将具有任何宽高比的图像拟合到具有指定宽高比的容器元素。并且让整个事情完全响应是必须的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    /* 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%
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
        <img src="//placehold.it/400x300" class="fit-img" alt="sample">
     

     
        <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
     

     
        <img src="//placehold.it/400x400" class="fit-img" alt="sample">
     

     
     
        <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">

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

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

    这是显示图像的简单页面的完整HTML代码。这很完美，我和www.resizemybrowser.com一起测试过。将CSS代码放在HTML代码的顶部，位于您的头部下方。将图片代码放在您想要的图片的任何位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <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>
           
                <img src="images/storm.jpg">
           
        </body>
    </html>

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

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

    编辑：以前基于表的图像定位在InternetExplorer11中存在问题(max-height在display:table元素中不起作用)。我用基于内联的定位替换它，它不仅在InternetExplorer7和InternetExplorer11中都能正常工作，而且还需要更少的代码。

    这是我对这个问题的看法。只有当容器具有指定的大小(max-width且max-height似乎与没有具体大小的容器相处时)它才会起作用，但我以允许它的方式编写CSS内容要重用(将picture-frame class和px125 size class添加到现有容器中)。

    在CSS中：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .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中：

    1
        <img src="http://i.imgur.com/lesa2wS.png"/>

    DEMO

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    /* 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;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <p>
    32px
    </p>

        <img src="http://i.imgur.com/lesa2wS.png"/>


        <img src="http://i.imgur.com/kFMJxdZ.png"/>


        <img src="http://i.imgur.com/BDabZj0.png"/>

    <p>
    125px
    </p>

        <img src="http://i.imgur.com/lesa2wS.png"/>


        <img src="http://i.imgur.com/kFMJxdZ.png"/>


        <img src="http://i.imgur.com/BDabZj0.png"/>

    编辑：使用JavaScript(升级图像)可能的进一步改进：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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) };
    });
    相关讨论

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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>


        <!-- Inside container -->
    相关讨论

    当图像太小时，Thorn007接受的答案不起作用。

    为了解决这个问题，我添加了比例因子。这样，它使图像更大，并填充div容器。

    例：

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

    笔记：

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

    我通过这种方式在水平和垂直方向上按比例居中并按比例缩放图像：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #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;
    }

    它在InternetExplorer，Firefox和Safari中进行了测试。

    有关居中的更多信息，请点击此处。

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

    在标记中，将max-height和max-width设为100％。

    1
        <img alt="That Image" style="max-height:100%; max-width:100%;" src="">

    正确完成后，您可以在相应的类中添加详细信息。

    如上所述，如果它不适用于您的浏览器(如Chrome)，您也可以使用vh单位而不是max-height: 100%：

    1
    2
    3
    img {
        max-height: 75vh;
    }
    相关讨论

    我看到很多人都建议使用对象，这是一个不错的选择。但是如果你想要在旧版浏览器中工作，还有另一种方法可以轻松完成。

    请在这里查看我的答案：
    IE和Edge修复了对象适合：封面;

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

    1
    2
    3
    4
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

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

    1
    2
    3
    4
    5
    6
    7
    // 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/

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

    所有提供的答案，包括已接受的答案，只能在div包装器具有固定大小的假设下工作。所以无论div包装器的大小如何，这都是如何做的，如果你开发一个响应式页面，这非常有用：

    在div选择器中写下这些声明：

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

    然后将这些声明放在IMG选择器中：

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

    很重要：

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

    相关讨论

    我使用以下代码修复了此问题：

    1
    <img src="image_url" />
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .container {
        height: 75px;
        width: 75px;
    }

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

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

  • 将CSS样式应用于图像容器(例如，)
  • 将width属性设置为所需的维度

    • 对于尺寸，使用%表示相对尺寸或自动缩放(基于图像容器或显示)
    • 使用px(或其他)表示静态或设置维度
  • 将height属性设置为根据宽度自动调整
  • 请享用！

    • 例如，

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

    如果您正在使用Bootstrap，则只需将img-responsive类添加到IMG标记：

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

    引导图像

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

    1
    2
    3
    4
    5
    6
    7
    8
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        overflow: hidden;
        /* Any custom height */
    }

    将包含的图像宽度调整为100％，您应该在保留尺寸的容器中获得一个漂亮的居中图像。

    通过一些数学计算，解决方案很简单......

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

    例如，假设您的图像宽度为200像素，高度为160像素。您可以有把握地说宽度值将是100％，因为它是更大的值。然后计算高度值，您只需将高度除以宽度，即给出百分比值80％。在代码中它看起来像这样......

    1
        <img src="some_pic.png" width="100%" height="80%">

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
      <img src="path/to/image.jpg">


    .container{
       height: 300px;
    }

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

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

    1
    2
    3
    .container img{
        object-fit: cover;
    }

    检查我的答案，使图像响应 - 最简单的方法 -

    1
    2
    3
    4
    img{
        width: 100%;
        max-width: 800px;
    }

    或者你可以简单地使用：

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

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

    相关讨论

    将div定义为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    div.headerimg1 {
       position: absolute;
       top: 290px;
       left: 81px;
       width: 389px;
       height: 349px;
    }


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