javascript - 垂直居中上传的图像预览

Question

我在我的网站上显示用户上传的图像预览，但我希望能够将其在 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() 的值何时可用，而不是每隔一段时间调用它直到它大于零？谢谢!

Answer 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 */
}

“幽灵”元素实质上成为您图像的脚手架，使用 vertical-align: middle; 设置图像样式，无论何时更新图像，它都应该正常工作。

这是一个 jsfiddle显示这可能是如何工作的。