Html CSS显示调整大小和裁剪的图像-续

这是本书的延续。答案似乎是好的，为用户，但我需要一些帮助，以改善这个答案

问：在运行时，调整大小（比例）如何与图像的大小相关。i、 e.我不想在样式中硬编码“宽度：320px；高度：221px；”之类的东西——如果您知道前面图像的尺寸，这是可行的

以下是一些jsfiddle：

-基于原始线程答案。如果您事先知道图像的尺寸，则可以使用

-您不必知道图像的尺寸，但仅适用于100%比例。（在这里，我只是从.scalePan类中删除了宽度和高度

-使用宽度和高度作为%。这会将图像缩放到包含div的大小，而不是图像的原始尺寸

我正在寻找一种方法，将图像缩放到原始尺寸的%，而不是它所在容器的%

---

非常感谢您的帮助。

我知道您想这样做，但我不能完全确定

$(document).ready(function() {
    var wdth = $('img').width();
    var hght = $('img').height();

    $('img').css('width',  wdth / 100 * 90 + "px"); // new width is 90% width of image
    $('img').css('height', hght / 100 * 70 + "px"); // new height 70% height of image
});

工作示例：

---

您不必使用JQuery，也可以使用常规javascript来实现这一点。

这可能可行，但它不是一个纯CSS解决方案，并且假定使用jQuery@saluce那么？你不必使用Jquery，他可以使用常规javascript来实现同样的结果。他在问题中没有明确表示他不想解决这个问题对于js，也许他不知道这可以通过javascript来完成！@anel_b适用于.scalePan类，但它阻止了.crop类的工作！？！？@我只想用CSS来完成这一切-但是如果使用javascript（包括jQuery）是我使用它的唯一方法。p.s.只是为了澄清这个答案即使使用jQuery也不起作用，请参见我上面的注释。@user1474617 crop类不起作用，因为我删除了溢出：隐藏。只需将它放在crop类中，它就会起作用。crop{width:200px；height:150px；overflow:hidden}我发现另一篇文章似乎是关于IE和Chrome的，但不是Firefox。它使用css缩放。我可能不得不接受这个限制。