Question

在我的UIImage项目中，我有一个未知大小的图像列表，我想要的是让图像在<VideoView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/videoView1" android:layout_centerInParent="true" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:layout_alignParentTop="true"> </VideoView>内水平居中。这可以通过AngularJS样式到div class="slideshow">来完成，然后删除隐藏的slideshow图像，但是我希望图像从一个淡入到另一个不会发生在text-align:center。

这里有Fiddle我拥有的东西。在示例中，我使用了ng-if预定义的尺寸，在我的应用中，这些尺寸未知

我希望那里有人知道一招; - ）

Answer 1

以您的风格添加此css

.slideshow img {width: 100%; opacity: 0;}

.slideshow .images {float：left;宽度：100;}

Answer 2

不需要任何花哨的东西，只需将图像设置为div的背景，如下所示：

<div id="slideshow" style="margin:auto;width:50%;height:350px;
    border:1px solid #000;
    background-color:#888;
    background-position:center;
    background-repeat:no-repeat;
    background-image:url('http://lorempixel.com/400/200/')">

然后您可以使用Javascript更新：

document.getElementById('slideshow').style.backgroundImage = 'urlOfNewImage';

Answer 3

试试这个

<强> CSS

 .slideshow .images {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        position: relative;
        width: 100%;
    }
    .slideshow img {
        position: relative;
        top: 5px;
        top: 0px;
        max-height: calc(100% - 10px);
        max-width: calc(100% - 10px);
        opacity: 0;
        transition: opacity 1s ease;
    }

你可以在这里查看jsFiddle

https://jsfiddle.net/L56rdqLp/20/

Answer 4

如果有人想要将图像淡入淡出，浮动将无效。（没有褪色的例子）

您需要使用以下内容定位元素：position: absolute;

但是，然后，用这一个将图像居中并不是那么简单。

根据建议，您可以在（div）持有人和设置背景图像中执行此操作。

div {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(".."); background-size: cover}

第二个选择是这个：

display: block;
position: absolute;
transform-origin: 50% 50%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;

这是一个工作示例（你的工作和褪色代码......）

＆＃13;

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', "$interval", function(scope, $interval) {
  scope.setImage = function (slide) {
      scope.slideshow.forEach(function(item) {item._active = false;});
      slide._active = true;
  };
  scope.slideshow = [
                {
                    src: 'http://lorempixel.com/400/200/',
                    _active: true
                },
                {
                    src: 'http://lorempixel.com/500/400/',
                    _active: false
                },
                {
                    src: 'http://lorempixel.com/100/800/',
                    _active: false
                }
            ]
            
  $interval(function(){
  //console.log("test");
            var index = -1
            for(var i = 0; i < scope.slideshow.length; i++){
                if(scope.slideshow[i]._active){
                    // console.info('active : ', scope.slideshow[i])
                    if(!scope.slideshow[i]._time){
                        scope.slideshow[i]._time = new Date()
                    }
                    var oldTime = moment(scope.slideshow[i]._time),
                        now = moment()

                    // console.info(now.diff(oldTime, 'seconds'))
                    if(now.diff(oldTime, 'seconds') > 5){
                        index = i + 1
                    }
                }
            }

            if(index > -1){
                if(index >= scope.slideshow.length){
                    index = 0
                }

                scope.setImage(scope.slideshow[index])
            }
        }, 1000)
}])

＆＃13;

.slideshow {
        display: block;
        height: 350px;
        width: 50%;
        border: 1px solid rgba(79,132,148,.5);
        border-radius: 3px;
        background-color: rgb(255,255,255);
        padding: 5px;
        margin: auto;
    }
        .slideshow .images {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
        }
            .slideshow img {
                display: block;
                position: absolute;
                transform-origin: 50% 50%;
                transform: translate(-50%, -50%);
                top: 50%;
                left: 50%;
                max-width: 100%;
                max-height: 100%;
                //max-height: calc(100%-10px);
                //max-width: calc(100%-10px);
                opacity: 0;
                transition: opacity 1s ease;
            }
            .slideshow img.active {
                opacity: 1;
                transition: opacity 1s ease;
            }

＆＃13;

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <section class="slideshow">
        <div class="images">
            <img ng-repeat="img in slideshow track by $index"
                    src="{{ img.src }}"
                    ng-class="img._active ? 'active' : ''" />
        </div>
    </section>
</div>

</div>

＆＃13;

中心绝对定位未知大小的图像

4 个答案: