layer弹出图片大小自适应

简介: layer弹出图片大小自适应

封装函数

/*弹出图片*/
function previewImg(url) {
    var imgHtml = "<img src='" + url + "' style='width:100%; max-width:100%;'/>";
    // 创建对象
    var img = new Image();
    img.src = url;
    layer.open({
        type: 1,
        shade: 0.5,
        area: [img.width + 'px', img.height + 'px'],
        shadeClose: true,
        scrollbar: false,
        title: false, //显示标题
        content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响
        cancel: function () {
            //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });
        }
    });
}


要点

    // 创建对象
    var img = new Image();
    img.src = url;
     area: [img.width + 'px', img.height + 'px'],


Done!

相关文章
|
6月前
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配 自适应)
|
7月前
|
图形学
自定义模型缩放比例
完成缩放后,查看模型在场景中的效果,确保大小和比例符合您的需求。如果需要进一步调整,可以重复上述步骤进行微调。
67 0
layer弹出iframe的高度不自适应。一直是150px
通常,我们这样写没问题,但是,当我们需要页面加载后直接就弹出layer时,最常见应用场景就是注册页面加载后直接触发layer,弹出注册协议。 这时候问题来了,我们会发现 弹出的iframe的高度一直是150px,高度并不自适应。 经分析:原因就是layer计算ifram的时候,页面还没加载完全,而ifram本身就是通过页面的高度的进行计算的(因为我高度设置的80%)
253 0
|
前端开发
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
|
JavaScript 前端开发
利用 clip-path 实现动态区域裁剪
利用 clip-path 实现动态区域裁剪
218 0
利用 clip-path 实现动态区域裁剪
|
前端开发
canvas如何自适应窗口大小
canvas如何自适应窗口大小
canvas如何自适应窗口大小
|
API 定位技术 UED
百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图
原文:百度地图API二:根据标注点坐标范围计算显示缩放级别zoom自适应显示地图 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/liusaint1992/article/details/50071613 上一文章讲了如何给地图添加点击事件做出不同的反应。
4909 0
|
测试技术 C#
C# 操作PDF 图层(Layer)——添加、删除图层、设置图层可见性
前言 通过添加图层,我们可以将文本、图片、表格、图形等元素精确定位于页面指定位置,将这些元素进行叠放、组合形成页面的最终效果。此外,对于页面中已有的图层我们也可以进行设置图层可见性、删除图层等操作。因此,在本篇文章中,将介绍如何在C#中进行PDF图层的操作。
1877 0