Javascript CSS3-如何交叉淡入未知高度的图像并使其垂直和水平居中

是的。这个标题概括了这一点。需要在悬停时交叉淡入淡出图像，最好只使用CSS。宽度和高度未知，因为我正在使用Wordpress创建的缩略图

我想我可以通过javascript确定宽度和高度，并应用左边距：宽度的50%和一半负左边距值，但如果可能的话，我宁愿不要

我试过弄乱显示属性和顶部和左侧属性，但运气不好

有人有什么想法吗

以下是HTML：

<div class="product_image_container">
    <img class="product_image1" src="little_apollo_blueprint.jpg" alt="Featured Image">
    <img class="product_image2" src="little_apollo.jpg" alt="Featured Image">
</div>

试试这个：

    .product_image_container {
        font-size: 0;
        letter-spacing: 0;
        word-spacing: 0;
    }

    .product_image1, .product_image2 {
        display: inline-block;
        vertical-align: middle;
        width: 260px; /* change according to your needs */
        height: auto;
        opacity: 1;
    }

    .product_image2 {
        margin-left: -260px;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    .product_image2:hover {
        opacity: 0;
    }

---

我最后做的是将图像制作成容器的大小，并在悬停时触发动画。次映像隐藏在容器外部，并在悬停时滑过。我稍微更改了功能，但在本例中使用填充框的图像是一种方法。

您可以通过在父

div

上设置

display

，将其设置为

table cell

，然后访问

vertical align:middle和
文本对齐：居中。您可能需要另一个容器
div
，以使它们正确地相互覆盖。
    .product_image_container {
        font-size: 0;
        letter-spacing: 0;
        word-spacing: 0;
    }

    .product_image1, .product_image2 {
        display: inline-block;
        vertical-align: middle;
        width: 260px; /* change according to your needs */
        height: auto;
        opacity: 1;
    }

    .product_image2 {
        margin-left: -260px;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    .product_image2:hover {
        opacity: 0;
    }