如何解决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">×</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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。