Question

我确信还有其他帖子可以通过各种方式解决这个问题。

我一直在努力解决这个问题，试图只做CSS而没有运气。玩css宽度和高度，在图像上混合使用100％和自动使我无处可去。

给出html：

<div class="container">
    <img src="http://image" />
</div>

和css：

.container { width: 500px; height: 400px; }

如何在保留纵横比和遵守容器限制的同时，将各种尺寸的图像放入容器中？

Answer 1

我相信你对此深思熟虑。

尝试添加以下CSS，然后删除javascript：

.container img {
    max-width:  100%;
    max-height: 100%;
}

这里是demo（点击图片动态加载不同尺寸）

Answer 2

我最终得到了javascript解决方案 - 我知道，这不是理想的，但是我能想到的最好的就是我需要的东西。我正在使用它的页面依赖于javascript来执行其他功能，因此在我的场景中不是问题。我也将图像加载到Bootstrap网格布局列中，如下所示：

<div class="row">
    <div class="col-md-6">
        <div class="main-image">
            <img src="http://initialimage" />
        </div>
    </div>
    <div class="col-md-6">
        Some content here ...
    </div>
</div>

在这种情况下，容器的宽度由bootstrap layout css控制，所以我只需要设置容器的高度：

.main-image { height: 400px; }

我尝试使用

.main-image { max-height: 400px; }

这样容器就会调整到水平拉伸的图像，但是jQuery会使容器高度错误。

无论如何，这是我正在使用的javascript：

var imageLoaded = function () {
    var container = $(this).parent();
    var maxWidth = container.width();
    var maxHeight = container.height();
    var width = $(this).width();
    var height = $(this).height();
    var containerRatio = maxWidth / maxHeight;        
    var ratio = width / height;
    if (ratio > containerRatio) {
        $(this).attr('width', '100%;');
        $(this).attr('height', 'auto');
    }
    else {
        $(this).attr('height', '100%;');
        $(this).attr('width', 'auto');
    }
};

$(document).ready(function () {
    $('.main-image img').bind('load', imageLoaded);
    imageLoaded.call($('.main-image img'));
});

您可能想知道为什么手动调用imageLoaded函数 - 这是因为在IE中，事件不会针对最初加载的图像触发。手动调用它会纠正它。

然后您可以更改图像来源：

$('.main-image img').attr('src', 'http://otherimage');

通过使用垂直图像的全高或水平图像的全宽来调整图像以适合容器。

任何更好的方式来做这件事或欢迎评论。

即使更改了src，也可以将图像放入容器中

2 个答案: