Dynamically scale images without breaking anchor scrolling - html

Question

I have a website that looks something like this:
http://illandril.net/outer.html
(Warning: AngularJS site on a server not setup to serve it properly - you'll need to go back to http://illandril.net/outer.html directly instead of using the browser reload.)
I seem to have two conflicting requirements though...
The images need to scale down when viewed on small screens (or in narrow browser windows)
There is a link that takes the user to the page already scrolled down to the "HEADER" section
My solution to #1 was simple...
img {
max-width: 100%;
}
But scrolling down to the HEADER area doesn't work, because the browser doesn't know how tall any of the images are (at least not on first view). "Easy", I thought... and I added width and height attributes to all my images.
Unfortunately, this made the images squished on narrow screens. So I adjust my CSS some more...
img {
max-width: 100%;
height: auto;
}
That fixed the squished image problem, but now the browser doesn't know how tall the images are again and scrolls to the wrong area when the page loads.
Is there some way I'm not aware of to tell the browser that images too wide to fit in their containers should be scaled down, but with a known aspect ratio so the image placeholders are all the right size before the image loads?
If it were a normal page, using window.onload for to trigger the scroll would work (See http://jsfiddle.net/nbS3F/1/), since that waits for all the images to load... but the site I'm working on is a single-page app using AngularJS, so the load event has long since fired by the time these new images are starting to load.

Answer 1

You must be doing the scrolling wrong. Use:
element.scrollIntoView(true);
With:
img {
max-width: 100%;
}
Fiddle
There is no such thing as "I want a max-width of 100%, but without a max-width of 100%".

Answer 2

I advise you to use css3 with responsive theme technique, you have to use different parameters in each screen size by applying :
#media only screen and
search google for responsive theme with jquery plug-in , this will help you a lot to design your website in professional way.

Answer 3

I've found a solution (though I'd prefer a nicer one still if anybody has one)... manually checking every single image to see if it is loaded or not, and listening to the onload and onerror events of the images not yet ready, scrolling only after all images have either loaded or failed.
var target = document.getElementById(targetID);
if (target) {
var scroll = function() {
target.scrollIntoView();
};
var toLoad = 0;
var onload = function() {
toLoad--;
if (toLoad === 0) {
scroll();
} else {
console.log('Waiting on ' + toLoad + ' images');
}
};
var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++) {
if (!images[i].complete) {
toLoad++;
images[i].onload = onload;
images[i].onerror = onload;
}
}
if (toLoad === 0) {
scroll();
}
}