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

【问题标题】：Magnify django thumbnail on mouse hover in django admin在 django admin 中鼠标悬停时放大 django 缩略图
【发布时间】：2019-04-05 18:36:42
【问题描述】：

如何为这个在管理部分显示缩略图的 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'

【问题讨论】：

标签： css django image admin thumbnails

【解决方案1】：

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

查看这个 codepen 示例，让我知道这是否适合您： 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>

【讨论】：

我正在寻找将样式附加到 django admin 的方法

【解决方案2】：

在你的 django 中创建一个静态目录 app->static->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

【讨论】：