css - 如何按自我的百分比而不是其容器的百分比缩放 img

Question

如何按自我的百分比而不是其容器的百分比缩放 img？

我不敢相信我以前从未遇到过这个问题，所以我猜要么标准改变了，要么我做错了什么，因为我很确定在过去，甚至在 CSS 之前，它是可以扩展的像这样的图像

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

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

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

如果我有一个 500px 宽的图像，并且用户选择了 50%，我希望该图像显示 250px 宽，此时我一点也不关心其容器的大小......

Answer 1

试试 CSSzoom属性。我相信它适用于 Chrome、Safari 和 IE，但不适用于 Firefox。

Answer 2

img 使用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。