在Django视图中按正确纵横比渲染图像

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文件中就正确处理图片，然后再发送到模板？如果可以的话，能不能给我一些代码示例，帮我指个方向？

Answer 1

我觉得有两种选择。要么是在上传时调整图片大小并保存到指定的文件夹，然后在视图中请求特定大小的图片，要么是在显示的时候调整图片大小。还有一个叫imagefit的应用，可以在显示时调整图片大小。这个工具让你在模板中显示图片时，可以指定它的尺寸，同时保留原始的图片文件。