Question

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

问：如何在运行时将调整大小（比例）与图像的大小相关联。即我不想硬编码像“width：320px; height：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执行此操作。

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

1 个答案: