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


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


当前回答

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

其他回答

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

在<img>标记中,将最大高度和最大宽度设置为100%。

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

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

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

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

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

不要将显式宽度或高度应用于图像标记。相反,给它:

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

此外,高度:自动;如果只想指定宽度。

例子:http://jsfiddle.net/xwrvxser/1/

国际货币基金组织{最大宽度:100%;最大高度:100%;}.肖像{高度:80px;宽度:30px;}.景观{高度:30px;宽度:80px;}.方形{高度:75px;宽度:75px;}纵向分区<div class=“纵向”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>景观部<div class=“landscape”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>方形分区<div class=“square”><img src=“http://i.stack.imgur.com/xkF9Q.jpg"></div>

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

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

例如

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