html自定义弹窗实现图片高度自适应

实际效果:
点击
html自定义弹窗实现图片高度自适应_第1张图片
实现
html自定义弹窗实现图片高度自适应_第2张图片
再次点击则弹窗消失。
弹窗布局为:

<div class="box">
    class="img" id="img" src=""/>
div>

css样式为:

.box {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .3);
    overflow: auto;
    display: none;
}
.box img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    /*max-height: 100%;*/
}

要求是图片居中,宽度为100%,如果图片过长时,图片显示纵向滚动条,问题是图片过长时有滚动条,但是无法翻到顶部。
解决办法:用js控制图片的动态定位。
相似例子代码为(项目本身使用vue,下面代码为html+css+js模拟项目实现的效果):


<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>sdfsdtitle>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body {
                width: 100%;
                height: 100%;
            }
            .showImg{
                width: 100px;
                height: 100px;
            }
            .box {
                position: fixed;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                background: rgba(0, 0, 0, .3);
                overflow: auto;
            }
            .box {
                display: none;
            }
            .box img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                max-width: 100%;
                /*max-height: 100%;*/
            }
        style>
    head>
    <body>
        
        <img class="showImg" onclick="clickImg('https://img.zcool.cn/community/[email protected]')" src="https://img.zcool.cn/community/[email protected]"/>
        
        <img class="showImg" onclick="clickImg('http://img.redocn.com/sheji/20180206/chaochangshujiabangongshiyixiangtu_9149371.jpg')" src="http://img.redocn.com/sheji/20180206/chaochangshujiabangongshiyixiangtu_9149371.jpg"/>

        <div class="box">
            <img class="img" id="img" src=""/>
        div>

        <script type="text/javascript">
            function clickImg(url){
                console.log(url);
                $(".box #img").attr('src',url); 
                var image = new Image();
                image.src = url;
                let realHei = image.height;//图片的实际高度
                let clientHei = document.body.clientHeight;//屏幕高度
                let setHei = '50%';
                if(clientHei*2//我本身用的是((realHei - clientHei*2)/732)*2*100;移动端的要根据实际用的缩放来看
                    let heiPercent = ((realHei - clientHei*2)/732)*100;
                    setHei = (50+heiPercent) + '%';
                }
                $(".box").css('display','block');
                $(".img").css('top',setHei);
            }

            $(".box").click(function(){
                $(this).css('display','none');
            });
        script>
    body>
html>

但是在保持图片比例不变的前提下,加上max-height: 100%;实现图片过长时,宽度自适应更方便有效。
记录一下,回头有空看看能不能不用js动态控制定位,仅用css实现这种效果。

你可能感兴趣的:(html,css,js)