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

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

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

当前回答

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

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

例如

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

2014-11-27 18:29:09

其他回答

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

2013-03-12 07:22:28

最简单的方法是使用对象拟合：

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

.container{
   height: 300px;
}

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

如果您使用Bootstrap，只需添加img响应类并更改为

.container img{
    object-fit: cover;
}

2016-06-04 11:49:22

所有提供的答案，包括已接受的答案，都只能在假设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的值必须相同。

2016-09-12 07:32:24

编辑：以前基于表格的图像定位在Internet Explorer 11中存在问题（最大高度在显示中不起作用：表格元素）。我将其替换为基于内联的定位，这不仅在InternetExplorer7和InternetExplorer11中都很好，而且还需要更少的代码。

这是我对这个问题的看法。只有当容器具有指定的大小（最大宽度和最大高度似乎不适合没有具体大小的容器）时，它才会起作用，但我以允许重用的方式编写了CSS内容（在现有容器中添加相框类和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.px32{宽度：32px；高度：32px；线条高度：32px；}.picture-frame.px125{宽度：125px；高度：125px；线条高度：125px；}.相框img{页边空白：-4px；/*使用垂直对齐定位时，由于某些原因，内联图像有轻微偏移*/最大宽度：100%；最大高度：100%；显示：内联块；垂直对齐：中间；边框：0；/*在Internet Explorer中删除锚定中包含的图像的边框*/}/*额外费用*/.相框{填充：5px；}框架{边框：1px实心黑色；}<p>32像素</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>125像素</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) };
});

2015-03-26 10:21:48

正如这里所回答的，你也可以使用vh单位而不是最大高度：如果它在你的浏览器（如Chrome）上不起作用，100%：

img {
    max-height: 75vh;
}

2016-05-30 02:54:27

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

推荐文章

最新文章

标签