使用 django 和 bootstrap 为艺术指导问题裁剪图像

问题描述

我有一个画库，里面有 400 幅画。我创建了一个轮播模型，用于显示我通过管理空间创建的特定主题的绘画组。

轮播通过“img-fluid”类显示响应式图像。

我想裁剪图像，以便它们能产生更大的影响。

我希望通过 HTML 而不是 jquery 来实现，因为这样可以更快地提供图像see Mozilla link:

看来我应该使用图片标签来获得类似于以下内容的内容：

<picture> 
<source media="(max-width: 799px)" srcset="img_cropped.png"> 
<source media="(min-width: 800px)" srcset="img.png"> 
<img src="img.png" alt="man on a tree" /> 
</picture>        

因此，我寻找并努力编写可以：

1. 为任何以“...img.png”结尾的painting.image创建img_cropped.png文件。

和

2. 在 carousel.html 中使用 for 循环提供图像

关于如何实现这一目标的任何意见和想法？

如果有帮助，下面是我的代码片段：

html

<div class="carousel slide" id="demo-carousel" data-ride="carousel">
 <div class="carousel-inner" role="listBox">
 {% for photo in photos %}
 {% if forloop.first %}
 <div class="carousel-item active">
 {% else %}
 <div class="carousel-item">
 {% endif %}
 {% if photo.image %}
<!-- <img class="img-responsive center-block" src='{{ photo.image.url }}' alt="Image">-->
 <img src='{{ photo.image.url }}' class="img-fluid" alt="Responsive image">
 >
 {% endif %}
 <div class="carousel-caption">
 <h3>{{ photo.title }}</h3>
 <p>{{ photo.description }}</p>
 </div>
 </div>
 {%endfor%}
</div>

models.py:

class Photo(models.Model):
 title = models.CharField(max_length=60,default='',blank=True)
 description = models.TextField(max_length=200,blank=True)
 width = models.IntegerField(default=0)
 height = models.IntegerField(default=0)
 image = models.ImageField(width_field="width",height_field="height")
 timestamp = models.DateTimeField(auto_Now_add=True,auto_Now=False)

 def __str__(self):
 return self.title

 class Meta:
 ordering = ["timestamp"]
 verbose_name = 'Photo'

views.py：

def photo_carousel(request):
 queryset = Photo.objects.all()
 context = {
 "photos": queryset,}
 return render(request,'bootstrap.html',context)[email protected](Photo)
class PhotoCarouselAdmin(admin.ModelAdmin):
 list_display = ('title','timestamp','width','height')
 exclude = ('width','height')
 list_display_links = ('title','timestamp')

 class Meta:
 model = Photo

admin.py:

@admin.register(Photo)
class PhotoCarouselAdmin(admin.ModelAdmin):
    list_display = ('title','height')
    exclude = ('width','height')
    list_display_links = ('title','timestamp')

    class Meta:
        model = Photo

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）