Question

我有一个拍摄图像的模型如下

class CoverImage(models.Model):
    id = models.AutoField(primary_key=True)
    image_upload = S3DirectField(upload_to='s3Direct')
    image_title = models.CharField(max_length=200)

它将接受任何大小和宽高比的图像。现在，根据显示的位置，我想在视图中使用正确的宽高比渲染图像。目前，图像变得非常扭曲，这导致显示数据的问题。

我尝试了如下的JavaScript / Jquery解决方案：

$('.main-img-ban').each(function(){ //main-img-ban is the image class
    var src = $(this).attr('src'); //getting external source
    var h=0, w=0; //initializing height and width
    $('<img />').attr('src', src).load(function(){ //getting the actual dimensions of the image
        h = this.height;
        w = this.width;
    });
    if (h>330){ //330 is max height of container for image
        var ratio = 330/h;
        $(this).css('height','330px');
        $(this).css('width',ratio*w);
        w = w*ratio;
        h = h*ratio;
    }
});

但是，这不能正常工作。有没有办法在将views.py文件发送到模板之前在我的{{1}}文件中正确渲染图像？如果是的话，有人可以通过一些代码示例指出我正确的方向吗？

Answer 1

我认为有2种选择。 resize image and save to directory and request specific size from view或在渲染时调整图像大小。有一个应用程序用于在渲染时调整大小图像imagefit。这允许您在模板中渲染图像并指定其尺寸。它保留了原始图像文件。

使用正确的宽高比在django视图中渲染图像

1 个答案: