Question

我有一个按钮，在弹出窗口中显示图像。如果图片是水平的，则不会完全显示。我想让显示图片的对话框动态地获取图片的大小，这样无论它的大小如何，它都会被完全显示出来。

这是我的主干观点：

    View.Proof = Marionette.ItemView.extend({
        template : pictureTpl,
        initialize : function(options) {
            this.parentModel = options;
            this.parentModel.documentBaseUrl = '../services/api';               
        },
        templateHelpers : function() {
            return {
                documentBaseUrl : this.parentModel.documentBaseUrl
            };
        },
        onShow : function(view) {
            this.listenTo(view, ".close", this.onClose);
            $('.modal-backdrop').remove();
            $(this.$el.children()[0]).modal('show');
            //$("#myModal2").modal('show'); 
        },
        onClose: function() {
            console.log('hide popup');
            //$("#myModal2").modal('hide');
            $(this.$el.children()[0]).modal('hide');
        }
    });

这是我的照片.tpl（pictureTpl）：

<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-  hidden="true">
  <div class="modal-dialog">
    <div class="modal-body">
            <div class="carousel-inner">
                <div class="item  active ">
                    <img style="border: 1px solid #666" src="<%- documentBaseUrl %>/pictures/<%- id %>/file" alt="folder" class="img-responsive">
                </div>
            </div>
    </div>
  </div>
</div>

有什么建议吗？

修改
经过深入研究后我发现了suggestion，所以我编辑了我的观点如下：

            onShow : function(view) {
            this.listenTo(view, ".close", this.onClose);
            $('.modal-backdrop').remove();
            $(this.$el.children()[0]).modal('show', function () {
                   $(this).find('.modal-body').css({
                          width:'auto', //probably not needed
                          height:'auto', //probably not needed 
                          'max-height':'100%'
                   });
            });

但是这个解决方案对我不起作用

弹出窗口中没有完全显示Img

0 个答案: