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


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


当前回答

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

其他回答

解决方法很简单,只需要一点数学。。。

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

例如,假设您的图像宽度为200像素,高度为160像素。您可以放心地说,宽度值将为100%,因为它是较大的值。要计算高度值,只需将高度除以宽度即可得到80%的百分比值。在代码中,它看起来像这样。。。

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

我刚刚发布了一个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();
});

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

HTML格式:

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

CSS:

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

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

当图像太小时,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转换原点:左上;在风格上。比例因子为4时,最大宽度=400/4=100,最大高度=200/4=50另一种解决方案是将最大宽度和最大高度设置为25%。这更简单。

这里有一个解决方案,即使提供的图像太小或太大,无法容纳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);
    }