html - 在不破坏 anchor 滚动的情况下动态缩放图像

Question

我有一个看起来像这样的网站:

http://illandril.net/outer.html

(警告:服务器上的 AngularJS 站点未设置为正确提供服务 - 您需要直接返回 http://illandril.net/outer.html，而不是使用浏览器重新加载。)

虽然我似乎有两个相互矛盾的要求......

1. 在小屏幕(或狭窄的浏览器窗口)上查看时，图片需要缩小
2. 有一个链接将用户带到已经向下滚动到“标题”部分的页面

我对 #1 的解决方案很简单......

img {
  max-width: 100%;
}

但是向下滚动到 HEADER 区域不起作用，因为浏览器不知道任何图像的高度(至少在第一次查看时不知道)。 “简单”，我想...然后我为我的所有图像添加了宽度和高度属性。

不幸的是，这使得图像在狭窄的屏幕上被挤压。所以我又调整了我的 CSS ...

img {
  max-width: 100%;
  height: auto;
}

这解决了压缩图像的问题，但现在浏览器不知道图像有多高，并在页面加载时滚动到错误的区域。

是否有某种我不知道的方式告诉浏览器图像太宽而无法放入其容器应该按比例缩小，但具有已知的纵横比以便图像占位符在图像加载之前都是正确的大小？

如果它是一个普通页面，使用 window.onload 来触发滚动会起作用(参见 http://jsfiddle.net/nbS3F/1/ )，因为它会等待所有图像加载...但我正在处理的网站是使用 AngularJS 的单页应用程序，因此在这些新图像开始加载时加载事件早已触发。

Answer 1

你一定是做错了滚动。使用:

element.scrollIntoView(true);

与:

img {
    max-width: 100%;
}

Fiddle

没有“我想要 100% 的最大宽度，但没有 100% 的最大宽度”这样的事情。