如何在Django CMS轮播组件中使用图片原始尺寸与比例？

问题背景 #

使用Django CMS前端插件的carousel组件时，图片出现裁剪、降采样导致分辨率低下的问题。尝试调整CSS未解决，插件仅支持固定比例选项，无原始比例设置入口，且加载的是经过处理的图片版本。图片加载逻辑位于模板文件djangocms_frontend/contrib/carousel/templates/djangocms_frontend/bootstrap5/carousel/default/image.html，原代码如下：

{% load cms_tags easy_thumbnails_tags %}
{% if instance.rel_image %}
    {% thumbnail instance.rel_image options.size crop=options.crop upscale=options.upscale subject_location=instance.rel_image.subject_location as thumbnail %}

    <img class="d-block w-100" src="{{ thumbnail.url }}" alt="{{ instance.rel_image.default_alt_text|default:'' }}" />
{% else %}
    <div class="d-block w-100"
        style="aspect-ratio: {{ aspect_ratio }}">
        {% for plugin in instance.child_plugin_instances %}
            {% render_plugin plugin %}
        {% endfor %}
    </div>
{% endif %}

解决方案 #

1. 实现全宽、无裁剪、高度响应式的图片显示 #

要让图片保持原始比例完整显示，同时自适应容器宽度，按以下步骤修改模板：

• 复制模板到项目目录：将原模板文件复制到你的Django项目模板目录下，路径为templates/djangocms_frontend/bootstrap5/carousel/default/image.html（避免修改插件源码，方便后续版本升级）
• 修改模板逻辑：替换原代码为以下内容：

  {% load cms_tags easy_thumbnails_tags %}
  {% if instance.rel_image %}
      {% thumbnail instance.rel_image "0x0" crop=False upscale=False as thumbnail %}
      <img class="d-block w-100" src="{{ thumbnail.url }}" alt="{{ instance.rel_image.default_alt_text|default:'' }}" style="object-fit: contain; height: auto;" />
  {% else %}
      <div class="d-block w-100">
          {% for plugin in instance.child_plugin_instances %}
              {% render_plugin plugin %}
          {% endfor %}
      </div>
  {% endif %}
  

  关键修改点：
  • "0x0"：告诉easy_thumbnails使用图片的原始尺寸，返回原图URL
  • crop=False：禁用图片裁剪，保留完整画面
  • upscale=False：禁止强制放大小图片，避免分辨率损失
  • style="object-fit: contain; height: auto;"：确保图片在容器内完整显示，高度随宽度自适应，不拉伸变形

2. 配置加载图片原始尺寸与比例 #

如果需要完全跳过缩略图处理，直接加载原图，修改模板如下：

{% load cms_tags %}
{% if instance.rel_image %}
    <img class="d-block w-100" src="{{ instance.rel_image.url }}" alt="{{ instance.rel_image.default_alt_text|default:'' }}" style="height: auto;" />
{% else %}
    <div class="d-block w-100">
        {% for plugin in instance.child_plugin_instances %}
            {% render_plugin plugin %}
        {% endfor %}
    </div>
{% endif %}

说明：

• 直接调用instance.rel_image.url获取原图的直接访问路径，完全绕过easy_thumbnails的裁剪和降采样处理
• style="height: auto;"保证图片高度随宽度自动调整，严格保留原始比例

内容的提问来源于stack exchange，提问作者Andrei Krivoshei