AngularJS - 居中圖像的水平滾動條

Question

我有一張比屏幕大的圖片，用戶可以在圖像上左右滾動。 如何使用javascript或css水平居中圖像？

這是觀點：

<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;
}

我還使用Google Image http://jsfiddle.net/x6jDu/制作了一個Jsfiddle演示示例。這種方法非常簡單，任何超出外部div的超大圖像都將以水平滾動為中心。設置邊距為0自動在圖像id做的中心技巧。 希望這能解決你的問題。