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

问题描述

我想在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

解决方法

您是否包含文件： https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.8.0/cloudinary-core-shrinkwrap.js

您可以尝试使用以下代码重现它吗？

<div>
  <img class="cld-responsive" width="480px" data-src="https://res.cloudinary.com/demo/image/upload/f_auto,w_auto,c_scale/sample.jpg">
</div>

<footer>
  <script type="text/javascript">
    var cl = cloudinary.Cloudinary.new({cloud_name: "demo"}); 
    cl.responsive();
    </script>
</footer>

https://jsfiddle.net/shirlymanor/yfka2o05/

,

我最终没有使用Bootstrap 4模态，只使用了regular css modals，而响应云图的照片运行得很好！

<!-- pop up photo modal -->
<div id="modal01" class="photo-modal" onclick="this.style.display='none'">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
    <img src="" id="item_photo_pop" class="w3-modal-content" style="width:100%">
  </div>

</div>

<script>
    $(function() {
        $('.item_photo').on('click',function() {
            var src_url = $.cloudinary.url($(this).attr('id') + '.jpg',{ width: 'auto',crop: 'scale',secure: true});
            $('#item_photo_pop').attr('src',src_url);
            $('#modal01').attr("style","display:block");
        });
    });
</script>

<script type="text/javascript">
    var cl = cloudinary.Cloudinary.new({cloud_name: "demo"}); 
    cl.responsive();
</script>