垂直居中上传的图像预览

Vertically centering an uploaded image preview

本文关键字：图像 垂直居中      更新时间：2023-09-26

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

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

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

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

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

你应该能够通过Michał Czernow的"ghost element"CSS垂直居中技术（CSS Tricks：Homeing 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，显示了它是如何工作的。

相关文章：