Jquery 以正确的纵横比在django视图中渲染图像

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

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

$（'.main img ban'）。每个（function（）{//main img ban）都是图像类
var src=$（this.attr（'src'）；//获取外部源
var h=0，w=0；//初始化高度和宽度
$（'330）{//330是图像容器的最大高度
var比率=330/h；
$（this.css（'height'，'330px'）；
$（this.css（'width'，ratio*w）；
w=w*比值；
h=h*比值；
}
});

---

然而，这并不能正常工作。在将图像发送到模板之前，是否有办法在

views.py

文件中正确渲染图像？如果是的话，有人能用一些代码示例为我指出正确的方向吗

我认为有两种选择。或者在渲染时调整图像大小。有一个用于在渲染时调整图像大小的应用程序，名为。这允许您在模板中渲染图像并指定其尺寸。它保留了原始图像文件。

我被你的问题弄糊涂了。你说你想修正纵横比，是吗？如果是这样，那么在不裁剪图像（或隐藏部分图像）的情况下，图像当然会失真。您想要裁剪还是缩放？还是我完全错了？我知道这是一个老生常谈的答案，但听起来可能效率很低。您是否有在大型网站上使用imagefit进行生产的经验。目前，我们创建和缓存图像-不知道是否值得作为一个整体来探索这一点alternative@AppHandwerker我建议您查看

简易缩略图

和

sorl缩略图

。我不知道当时为什么使用

imagefit

。这可能是因为，当时我正处于django专业编程的开始阶段，可能已经找到了与该库相关的教程或代码片段。感谢您再次光临。我明白了。我的意思是，如果它在第一次请求后（有史以来）将其缓存起来，听起来并不是一个糟糕的主意——但听起来并不是这样。我们来看看其他的建议。谢谢你抽出时间。