使图像适合容器，即使更改了src

Question

I'm sure there are other post that address this in various ways.

I've been struggling with this a bit, trying to do CSS only approach with no luck. Playing around with css width and height, doing a mix of 100% and auto on the image got me nowhere.

Given html:

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

And css:

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

How to fit images of various sizes into the container while preserving aspect ratio and obeying constraints of the container?

Answer 1

I believe you are far over-thinking this.

Try adding the following CSS, and removing the javascript:

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

Here's a demo (click the images to dynamically load a different size)

Answer 2

I ended up with javascript solution - I know, not ideal but it's the best I could come up with that does what I need it to. The page where I'm using this relies on javascript to perform other bits of functionality so that's not a problem in my scenario. I'm also loading images into a Bootstrap grid layout column, like so:

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

The width of the container in this case is controlled by bootstrap layout css so I only need to set the height of the container:

.main-image { height: 400px; }

I tried with using just

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

So that the container would adjust to horizontally stretched images but then jQuery gets the container height wrong.

Anyway, here's the javascript I'm using:

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'));
});

You may wonder why the manual invocation of imageLoaded function - it's because in IE, the event doesn't fire for the initially loaded image. Invoking it manually corrects that.

You can then change the image source:

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

And the image will adjust to fit the container by either using up full height for vertical images or full width for horizontal images.

Any better way to do this or comments welcome.