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


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


当前回答

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

其他回答

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

您必须告诉浏览器您放置它的高度:

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

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

#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中进行了测试。

有关居中的更多信息,请参阅此处。

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

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