javascript - AngularJS - 居中图像的水平滚动条

Question

我有一张比屏幕大的图片，用户可以在图片上左右滚动。如何使用 javascript 或 css 将图像水平居中？

这是 View :

<div ng-show="isLandscape">
    <div ng-if="isSelected(color.code)" ng-repeat="color in colors">
    <img id="fullSwatch" ng-src="{{ images.swatches[color.code] }}" full-swatch>
    </div>
</div>

这是我的指令:

colorsController.directive('fullSwatch', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {

            var img = document.getElementById("fullSwatch");

            //swap width and height values because they are before orientation change
            var h = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            var w = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

            var imageWidth = img.width;
            var imageHeight = img.height;

            var aspectRatio = imageWidth / imageHeight;

            // fill image vertically
            imageHeight = h;
            imageWidth = h * aspectRatio;

            img.style.width = imageWidth + "px";
            img.style.height = imageHeight + "px";
            img.style.maxWidth = "none";

            var container = img.parentNode;
            var scrollLeft = (imageWidth - w) / 2;
            container.scrollLeft = scrollLeft;

        });
    }
};
});

我已经尝试将向左滚动添加到父 div 和图像本身，但它没有被应用。

Answer 1

div{
     position:relative;
     overflow-y:hidden;
}


   #fullSwatch{
     margin:0 auto;
    display:table;
}

我还制作了一个 Jsfiddle 演示，作为使用 Google Image 的示例 http://jsfiddle.net/x6jDu/这种方法非常简单，任何大于外部 div 的超大图像都将通过水平滚动居中。将图像 id 上的边距设置为 0 auto 可以实现居中技巧。希望这能解决您的问题。