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

Question

这是 CSS Display an Image Resized and Cropped 的延续.该用户的答案似乎没问题，但我需要一些帮助来改进该答案...

问:resize(缩放)如何在运行时与图像的大小相关联。即我不想硬编码“宽度:320px；高度:221px；”之类的东西在样式中 - 如果您预先知道图像的尺寸，这将起作用。

这里有一些 jsfiddles:

http://jsfiddle.net/VdX68/ - 基于原始线程答案。如果您预先知道图像的尺寸，就可以使用。

http://jsfiddle.net/VdX68/4/ - 您不必知道图像的尺寸，但只适用于 100% 比例。 (这里我只是从 .scalePan 类中删除了宽度和高度。

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

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

非常感谢任何帮助。

Answer 1

我知道你想这样做，但我不完全确定。

$(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
});

工作示例:http://jsfiddle.net/VdX68/18/

您不必使用 JQuery，您也可以使用常规的 javascript 来做到这一点。