在 django admin 中鼠标悬停时放大 django 缩略图

Question

如何向在管理部分显示缩略图的此 django 管理功能添加 css 悬停效果。放大图片尺寸

def image_tag(self):
        if self.image:
            return mark_safe('<img src="%s" style="width: 50px; height:40px;" />' % self.image.url)
        else:
            return 'No Image Found'
    image_tag.short_description = 'Image'

Answer 1

我建议将图像包裹在一个或另一个元素上，并在悬停时将图像的位置设置为绝对位置，这样在放大时不会弄乱布局。

查看此代码笔示例，让我知道这是否适合您： https://codepen.io/darthrubens/pen/Zqgwoa

.profile-pic-wrapper {
  width: 60px;
  height: 90px;
  cursor: pointer;
}

.profile-pic-wrapper img {
  position: relative;
  width: 60px;
}

.profile-pic-wrapper:hover img {
  position: absolute;
  width: 120px;
}

<div class="profile-pic-wrapper">
  <img src="https://media.bizj.us/view/img/10179818/nicolascage2011cc*750xx617-823-17-0.jpg" />
</div>
<div>
  Some other content
</div>

Answer 2

在你的 django 中创建一个静态目录应用程序->静态->app_name->css->style.css

然后在你的admin.py中添加这样的样式

class Media:   
    css = {
     'all': ('app_name/css/style.css',)
    }

在模型管理员内部。示例：

class ModelNameAdmin(admin.ModelAdmin):
      class Media:   
             css = {
             'all': ('app_name/css/style.css',)
            }

然后写下你的习惯css

在 django admin 中鼠标悬停时放大 django 缩略图

Magnify django thumbnail on mouse hover in django admin

css

django

image

admin

thumbnails