javascript - 使用 JS 代码在幻灯片中垂直居中图像？

Question

我认为我有一个问题需要用 javascript 解决，但不知道如何开始，所以希望来自 javascript 社区的人能够提供帮助。

基本上，下面的代码允许我将 10 张图像加载到幻灯片轮播中。 但是，这些图像要么是 600px x 400px Portrait，要么是 400px x 600 Landscape。我的问题是风景图像 垂直对齐到容器的顶部。

我已经设法通过在我的 CSS 文件 image-P 和 image-L 中创建两个类来解决这个问题

image-L 有一个“padding-top:100px”，它成功地将横向图像垂直对齐在中心。

我想做的是让代码检查哪些图像是横向的，然后创建

return '<img src="Images/' + item.url + '" class="image-L" alt="" />';

和任何其他用途

return '<img src="Images/' + item.url + '" class="image-P" alt="" />';

非常感谢。

干杯罗布。

<script type="text/javascript">

    var mycarousel_itemList = [
        { url: "Image1.jpg" },
        { url: "Image2.jpg" },
        { url: "Image3.jpg" },
        { url: "Image4.jpg" },
        { url: "Image5.jpg" },
        { url: "Image6.jpg" },
        { url: "Image7.jpg" },
        { url: "Image8.jpg" },
        { url: "Image9.jpg" },
        { url: "Image10.jpg" }
    ];

    function mycarousel_itemLoadCallback(carousel, state) {
        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }

            if (i > mycarousel_itemList.length) {
                break;
            }

            carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i - 1]));
        }
    };

    /**
    * Item html creation helper.
    */
    function mycarousel_getItemHTML(item) {
        return '<img src="Images/' + item.url + '" class="image-L" alt="" />';
    };

    jQuery(document).ready(function () {
        jQuery('#mycarousel').jcarousel({
            size: mycarousel_itemList.length,
            itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
        });
    });

Answer 1

您可以尝试使用 Image 类 [2] 将图像加载到 JavaScript [1] 中并检查图像本身的高度/宽度以确定应用哪个类，但是如果您在加载时这样做会减慢速度时间。 (我不知道浏览器是否会缓存该文件，以便您稍后显示它)。

似乎最好在图像添加到文档/显示后等待并应用样式。

您可能会使用 jQuery 获取(浏览器) View 的高度和图像的高度，然后将图像绝对定位为居中。 (如果你以后想使用不同的图像尺寸，那会更灵活)。

1. > http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317
2. > http://www.w3schools.com/jsref/dom_obj_image.asp