关键词：
【中文标题】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">×</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>
【讨论】：
Bootstrap 4 模态中的 Cloudinary 响应式图像以适应移动屏幕
】Bootstrap4模态中的Cloudinary响应式图像以适应移动屏幕【英文标题】：CloudinaryresponsiveimageinBootstrap4modaltofitmobilescreen【发布时间】：2020-12-0621:54:46【问题描述】：我想在Bootstrap4模式弹出窗口中使用Cloudinary图像。模态弹出窗口在桌... 查看详情
Bootstrap 4的模态和滚动模态有啥区别？
】Bootstrap4的模态和滚动模态有啥区别？【英文标题】：WhatisthedifferencebetweenBootstrap4\'smodalandscrollmodal?Bootstrap4的模态和滚动模态有什么区别？【发布时间】：2019-02-2620:16:07【问题描述】：我在网站上使用了很多模态框，而在移动... 查看详情
模态关闭后，Bootstrap 4 模态背景仍然存在
】模态关闭后，Bootstrap4模态背景仍然存在【英文标题】：Bootstrap4ModalbackdropremainsafterModalisclosed【发布时间】：2018-01-1022:43:21【问题描述】：大家好，我在Razor视图中使用Bootstrap4Modal，当我单击该链接时，在该Modal中有一个链接，... 查看详情
如何检查 bootstrap-4 模态是不是已经打开？
】如何检查bootstrap-4模态是不是已经打开？【英文标题】：howtocheckifbootstrap-4modalalreadyopen?如何检查bootstrap-4模态是否已经打开？【发布时间】：2018-04-1010:03:41【问题描述】：我想检查某个模态是否已经打开，我已经尝试过这种方... 查看详情
Bootstrap 4模态对齐问题
】Bootstrap4模态对齐问题【英文标题】：Bootstrap4Modalalignmentissue【发布时间】：2018-09-1112:44:39【问题描述】：Bootstrap模式突然决定对我失败..一直在寻找解决方案，但由于我没有使用Bootbox或测试版，所以没有任何问题符合我的问题... 查看详情
Bootstrap 4 模态在隐藏时未正确关闭
】Bootstrap4模态在隐藏时未正确关闭【英文标题】：Bootstrap4ModalNotClosingProperlyOnHide【发布时间】：2018-03-1918:33:35【问题描述】：我在bootstrap3中可以正常工作，但在bootstrap4（测试版）中我没有运气。模态本身的编码如下（简单的登... 查看详情
Bootstrap 4 模态不透明度
】Bootstrap4模态不透明度【英文标题】：Bootstrap4ModalOpacity【发布时间】：2018-03-1103:54:33【问题描述】：所以我正在使用Bootstrap4Beta并希望在显示模态时使背景变暗。我看到一个帖子，我只需要添加css类.modal-backdrop.inopacity:0.5!importan... 查看详情
带有重力形式的 Wordpress 中的 Bootstrap 模态
】带有重力形式的Wordpress中的Bootstrap模态【英文标题】：BootstrapModalinWordpressWithGravityForm【发布时间】：2015-05-2522:59:00【问题描述】：我在Wordpress网站上有一个页面，该页面带有一个Bootstrap模态，当单击图形时会出现该模态，并... 查看详情
bootstrap 4 modal-backdrop 样式（特定模态）
】bootstrap4modal-backdrop样式（特定模态）【英文标题】：bootstrap4modal-backdropstyle(specificmodal)【发布时间】：2018-09-2003:52:51【问题描述】：我想知道如何更改特定模态的模态背景颜色（不是模态的背景颜色）。如果我使用“shown.bs.moda... 查看详情
从左侧开始的 Bootstrap 4 模态幻灯片
】从左侧开始的Bootstrap4模态幻灯片【英文标题】：Bootstrap4ModalSlidefromLeft【发布时间】：2018-09-2000:44:45【问题描述】：我需要从左侧滑动打开引导模式。但是，该功能只能在Bootstrap3上工作，而不能在Bootstrap4上工作。引导程序3版... 查看详情
如何在 Bootstrap 4 模态表单中重置单选按钮和复选框？ [复制]
】如何在Bootstrap4模态表单中重置单选按钮和复选框？[复制]【英文标题】：HowtoresetradiobuttonsandcheckboxesinaBootstrap4modalform?[duplicate]【发布时间】：2019-01-0803:12:31【问题描述】：实际上我正在使用Boostrap4，我想通过JS使用下面的函数... 查看详情
MVC 4 使用 Bootstrap 编辑模态表单
】MVC4使用Bootstrap编辑模态表单【英文标题】：MVC4EditmodalformusingBootstrap【发布时间】：2013-04-0707:54:38【问题描述】：我正在使用MVC4和EntityFramework来开发IntranetWeb应用程序。我有一个可以通过编辑操作修改的人员列表。我想通过使... 查看详情
Bootstrap 4 模态出现在背景后面（Django 应用程序）
】Bootstrap4模态出现在背景后面（Django应用程序）【英文标题】：Bootstrap4modalappearsbehindbackground(Djangoapp)【发布时间】：2019-05-2915:23:27【问题描述】：我已经彻底研究过这个问题，但是所有的解决方案都来自旧版本的Bootstrap，它们... 查看详情
Bootstrap 模态宽度中的数据表
】Bootstrap模态宽度中的数据表【英文标题】：DatatablesinBootstrapmodalwidth【发布时间】：2016-08-0107:34:40【问题描述】：在我的模态中，我试图将数据表放在那里，我遇到的问题是宽度不正确，它应该是模态的宽度，但实际上是这样... 查看详情
从下拉列表中触发时，Bootstrap-4 模态不显示
】从下拉列表中触发时，Bootstrap-4模态不显示【英文标题】：Bootstrap-4modalnotshowingwhentriggeredfrominsideadropdown【发布时间】：2019-12-1202:38:18【问题描述】：我使用了一个下拉菜单，其中一个下拉项目应该打开一个模式。但它没有显示... 查看详情
Bootstrap 模态中的图像问题
】Bootstrap模态中的图像问题【英文标题】：IssueswithimageinsideBootstrapmodal【发布时间】：2016-04-2220:46:00【问题描述】：http://codepen.io/anon/pen/jWGXKJ<adata-toggle="modal"href="#modal"class="btnbtn-primary">Open</a><divid="modal"c 查看详情
带有 JQuery 和 AJAX 的 Bootstrap 4 模态？
】带有JQuery和AJAX的Bootstrap4模态？【英文标题】：Bootstrap4ModalwithJQueryandAJAX?【发布时间】：2018-03-0412:43:52【问题描述】：基本上，我在模态框内有一个表单。我需要从模式中获取信息，以便可以在我的应用程序的其余部分中使用... 查看详情
如何删除此 bootstrap 4 模态右侧的多余空间？
】如何删除此bootstrap4模态右侧的多余空间？【英文标题】：HowdoIremovetheextraspaceontherightsideofthisbootstrap4modal?【发布时间】：2020-06-1712:27:25【问题描述】：这里是小提琴：https://jsfiddle.net/apo5u0mt/代码如下：HTML<divclass="modal"id="galler... 查看详情