如何按照自身的百分比而不是其容器的百分比来缩放图像

Question

如何根据自我的百分比而不是其容器的百分比来扩展img？

我无法相信我以前从未遇到过这个问题，所以我猜测标准是否已经改变，或者我做错了什么，因为我很确定在白天回来，在CSS之前，它是可以像这样缩放图像

<img src="something.jpg" height="50%" width="50%">

但是现在按容器对象大小来缩放它，这与我完全无关。

除了让我开始计算像素之外没有别的方法可以在javascript中实现这种非常简单的图像样式吗？

如果我有500px宽的图像，并且用户选择50％，我希望该图像显示250px宽，我此刻并不关心其容器的大小......

Answer 1

尝试使用CSS zoom属性。我相信它适用于Chrome，Safari和IE，但不适用于Firefox。

Answer 2

img use style="max-height:100%;max-width:100%;"将填充容器框，但将所有图像保留在容器内。 如果图像与容器框的大小不同，则使用style="min-height:100%;min-width:100%;"将填充容器和剪辑。

不能用于浏览器不支持max \ min-height \ width（我认为低于ie7。）

Answer 3

在图像上设置百分比大小，然后使用position: absolute;

在图像周围使用包装

http://jsfiddle.net/KWWZz/

一些不幸的缺点：

1. 这在IE7中似乎不起作用（截至发布时，jsfiddle似乎不适用于IE7或IE8，因此很难真正显示）
2. 因为您正在使用绝对定位，所以您可能必须更改某个父容器的定位上下文，以使其适用于任何给定的情况。

Answer 4

我最终解决了这个问题（使用javascript / jQuery）： - 创建一个div - 插入图像 - 从图像中拾取尺寸 - 将这些尺寸设置为DIV - 将图像尺寸设置为100％

这样图像直到最初都是原始大小，我在DIV上的jQuery resize（）将起作用，图像将始终填充DIV。