垂直居中上传的图像预览答案

【问题标题】：Vertically centering an uploaded image preview垂直居中上传的图像预览
【发布时间】：2025-01-13 01:30:02
【问题描述】：

我在我的网站上显示用户上传的图像预览，但我希望能够在 div 中垂直居中。我试图通过在完成上传后使用 Javascript 设置图像的margin-top 来做到这一点（其中$img 是有问题的图像）：

reader.onloadend = (function() {
    var $parentDiv = $img.parent();
    $img.css('margin-top', ($parentDiv.height() - $img.height()) / 2);
});

我读过的FileReader documentation 让我相信，一旦文件上传完成，onloadend 就会被调用，而且似乎确实如此。然而，无论图像的大小如何，$img.height() 在调用onloadend 时都会返回0。

这似乎是因为该值根本不可用。如果我上传第二张图片（清除现有图片预览），然后重新上传第一张图片，该功能有效； $img.height() 返回正确的值。之后通过控制台调用它也会正确返回。

是否有公认的处理方式？除了每隔一段时间调用它直到它大于零之外，有什么方法可以知道.height() 的值何时可用？谢谢！

【问题讨论】：

为什么不用 CSS 处理垂直居中？你正在使用 HTML5 的东西，所以你显然不想支持旧浏览器，所以你应该能够将 display: table-cell; vertical-align: middle; 添加到父级 div。

标签： javascript jquery html filereader

【解决方案1】：

您应该能够通过 Michał Czernow 的“幽灵元素”CSS 垂直居中技术 (CSS Tricks: Centering in the Unknown) 的变体来解决零高度问题。这将不需要对图像进行 javascript 操作。

使用 CSS 为你的容器 div 添加一个伪元素：

.container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

'ghost' 元素本质上成为了图像的支架，使用 vertical-align: middle; 设置图像的样式，并且无论何时更新图像，它都应该可以正常工作。

这是一个jsfiddle，展示了这可能是如何工作的。

【讨论】：

确保图像定义了width。例如width: 100% 或我的 width: calc(100% - 1px)。