Setting the late update aside for the moment:
It looks like you want to rescale an image on the server to the exact size needed by the client, rather than using CSS to resize the image in-browser. (Note that "crop" and "rescale" are different things; I'm assuming you actually mean "rescale".)
Here's one way to do what you're trying to do:
You do need, ultimately, to check the container's width and height on the client side -- the container size can't be known until page load, as it depends on the user's viewport size.
You can simplify communication with the server by using the image URL itself as a signal for the desired image to be generated. In this example I construct image URLs for placehold.it; you would instead substitute your own serverside script which would catch the url request, extract the desired width and height from the filename, and return the scaled image.
var reloadImage = function() {
var w = $('.container').width();
var h = $('.container').height();
$('.container img').attr("src", "http://placehold.it/"+w+"x"+h);
};
$('.container').mouseup(reloadImage);
.container {
width: 100px; height: 100px;
border: 2px solid;
resize: both; /* Note that not all browser support "resize"; it's just for demo here, not essential to the technique itself */
display: inline-block;
overflow:auto
}
.container img {width: 100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Resize this container:<br>
<div class="container"><img class="image" src="http://placehold.it/100x100"></div>
(Note that there is no need to create a "massive" placeholder image as you suggest -- a single pixel image, CSS scaled to 100% width and height, will do. As will no placeholder image at all, of course.)
Here's why you should not do what you're trying to do:
- It will defeat browser-side cacheing of the image (since different images may be needed on each load), effectively increasing bandwidth use rather than saving it.
- The time spent serverside re-scaling the image will cost more than would have been saved compared to downloading a larger-than-necessary image (or, alternatively, you'd have to cache many different-sized variations on the image serverside to be handed out as needed.)
- Resizing the window after load either triggers new image generation (wasting bandwidth and server time) or leads to potentially undersized images. Upscaled too-small images look significantly worse than downscaled too-large ones.
Here's what you should do instead
Create three or four different sized images each somewhat larger than a typical use case (think desktop, tablet, mobile) and use @media queries to choose one based on the screen size. Use in-browser scaling to tweak that selected image to the exact desired size.
.foo {
background:url('foo_default.png') no-repeat 50% 50% fixed;
background-size: cover;
}
@media only screen and (max-width: 400px) {
.foo { background-image: url('foo_small.png'); }
}
@media only screen and (max-width: 800px) {
.foo { background-image: url('foo_med.png'); }
}
@media only screen and (min-width: 800px) {
.foo { background-image: url('foo_large.png'); }
}
But wait, there's an update
I do not have control over what methods will be employed to restrict the maximum height or width of a given image. This code will be running on different sites. One site may use css max-height on the image itself. Another may have a set height for a container. I don't know. Either way I need to figure out how big an image can be shown before it begins to be scaled or cropped.
This complicates things quite a bit more -- now you not only need to detect on the clientside the container width and height, but also need to parse any client CSS that may be affecting the image and altering its displayed size.
You could use window.getComputedStyle() on the image to get the list of applicable CSS rules; determining their effects would be... somewhat complicated. There is a partial implementation of this in an answer to this question, for example, though it only includes a tiny handful of the CSS rules that could affect an image or background image's size -- for a general-purpose solution you'd basically be doing the same work that the browser does to lays out the image in the first place.
It may go without saying that it'd be simpler to just have each site just request an appropriately-sized image in the first place.
