Bootstrap 4模式中的Cloudinary响应式图像适合移动屏幕

编程问答 2022-08-16

问题描述

我想在Bootstrap 4模式弹出窗口中使用Cloudinary映像。模态弹出窗口在桌面视图中可以很好地工作，例如，模态和图像位于视图区域的中心，模态可以按预期工作。

但是，当我使用移动设备（在Chrome开发人员中）进行测试时，模式运行良好，无论到目前为止我尝试了什么，Cloudinary图像的大小都没有响应。

模态HTML如下：

<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true" class="glyphicon glyphicon-remove"></span>
                <span class="sr-only">Close</span>
            </button>
            <img src="" class="item_photo_pop img-center cld-responsive">
        </div>
        </div>
    </div>
</div>

模态的javascript如下：

<script>
    
    $(function() {
        $('.item_photo').on('click',function() {
            var src_url = $.cloudinary.url($(this).attr('id'),{ width: 'auto',crop: 'scale',secure: true });
            $('.item_photo_pop').attr('src',src_url);
            $('#imagemodal').modal('show');
        });
    });
    
    var cl = cloudinary.Cloudinary.new({cloud_name: "xxxxxxxx"}); 
    cl.responsive();

</script>

css的用法如下：

.modal-dialog {
    display: table; /* This makes modal fill view area */ 
    width: 95%;
    height: 92%;
    padding: 0;
}

.modal-content {
    height: 99%;
}

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

如果我显示没有图像的模态，例如设置了var src_url = ''，则模态会相应地填充台式机和移动设备中的视图区域。

因此很明显，Cloudinary图像的大小没有响应以适应模式。

我该怎么做才能使Cloudinary图像响应大小以适合模态？

编辑以添加：

javascript将img src的URL更新为：https://res.cloudinary.com/xxxxxxxx/image/upload/c_scale,w_auto/rcdvyr8meehm8jg

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

cloudinaryjavascriptjquerytwitter-bootstrap