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

Posted 2023-03-25

【中文标题】Bootstrap 4 模态中的 Cloudinary 响应式图像以适应移动屏幕

【英文标题】：Cloudinary responsive image in Bootstrap 4 modal to fit mobile screen

【发布时间】：2020-12-06 21:54:46

【问题描述】：

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

modal 的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 网址更新为：https://res.cloudinary.com/xxxxxxxx/image/upload/c_scale,w_auto/rcdvyr8meehm8jg

【参考方案1】：

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

你可以尝试用下面的代码重现它吗：

<div>
  <img class="cld-responsive"  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/

【讨论】：

我没有加入cloudinary-core-shrinkwrap.js，但这样做之后，仍然没有变化。然后我尝试使用 cloudinary 示例 img 标签，但仍然没有变化。我的脚本在页面底部。

【参考方案2】：

我最终没有使用 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>