微信朋友圈长图居中展示。

微信朋友圈长图居中展示

下载地址：https://download.youkuaiyun.com/download/webben/11275077

<!DOCTYPE html>
<html>
<head>
    <title>微信演示</title>
    <style>
        div{
            display: block;
        }
        ul{
            width: 342px;
            margin: -4px 0 0 -4px;
            display: block;
            list-style: none;
            padding: 0;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
            letter-spacing: normal;
            word-spacing: normal;
        }
        ul li{
            width: 110px;
            height: 110px;
            margin: 4px 0 0 4px;
            position: relative;
            overflow: hidden;
            float: left;

        }
        ul li img{
            border: 0;
            vertical-align: top;
            display: inline-block;
            transform: none;
            min-width: 0;
            max-width: none;
            max-height: none;
            position: relative;
            width: 110px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div style="width:1000px; height: 350px;">
        <ul class="photos">
            <li>[外链图片转存失败(img-WCSFAIop-1562222457786)(https://mp.youkuaiyun.com/mdeditor/1.png)]</li>
            <li>[外链图片转存失败(img-qrFJdyAn-1562222457788)(https://mp.youkuaiyun.com/mdeditor/2.png)]</li>
            <li>[外链图片转存失败(img-6Vg8kSYO-1562222457791)(https://mp.youkuaiyun.com/mdeditor/3.png)]</li>
            <li>[外链图片转存失败(img-IH2ASlMo-1562222457796)(https://mp.youkuaiyun.com/mdeditor/4.png)]</li>
            <li>[外链图片转存失败(img-wIa0dGtQ-1562222457798)(https://mp.youkuaiyun.com/mdeditor/5.png)]</li>
            <li>[外链图片转存失败(img-EfnCqx41-1562222457806)(https://mp.youkuaiyun.com/mdeditor/6.png)]</li>
            <li>[外链图片转存失败(img-ThGttNSS-1562222457814)(https://mp.youkuaiyun.com/mdeditor/7.png)]</li>
            <li>[外链图片转存失败(img-Uswflcbb-1562222457817)(https://mp.youkuaiyun.com/mdeditor/8.png)]</li>
            <li>[外链图片转存失败(img-hIuniLn6-1562222457821)(https://mp.youkuaiyun.com/mdeditor/9.png)]</li>
            <li>[外链图片转存失败(img-nPpqkoMO-1562222457824)(https://mp.youkuaiyun.com/mdeditor/1.jpg)]</li>
            <li>[外链图片转存失败(img-p918HG8k-1562222457827)(https://mp.youkuaiyun.com/mdeditor/2.jpg)]</li>
            <li>[外链图片转存失败(img-MbU4WqSZ-1562222457830)(https://mp.youkuaiyun.com/mdeditor/3.jpg)]</li>
            <li>[外链图片转存失败(img-D7399YUA-1562222457831)(https://mp.youkuaiyun.com/mdeditor/4.jpg)]</li>
            <li>[外链图片转存失败(img-6yzziG5Z-1562222457834)(https://mp.youkuaiyun.com/mdeditor/5.jpg)]</li>
            <li>[外链图片转存失败(img-EdJI369T-1562222457836)(https://mp.youkuaiyun.com/mdeditor/6.jpg)]</li>
            <li>[外链图片转存失败(img-Yz3WNcRS-1562222457838)(https://mp.youkuaiyun.com/mdeditor/7.jpg)]</li>
            <li>[外链图片转存失败(img-cOCrPCeX-1562222457839)(https://mp.youkuaiyun.com/mdeditor/8.jpg)]</li>
            <li>[外链图片转存失败(img-IThDOrgR-1562222457841)(https://mp.youkuaiyun.com/mdeditor/9.jpg)]</li>
        </ul>
    </div>
    <p> <input id="h" type="text" disabled placeholder="H"> = 2 * <input id="x" type="text" placeholder="X"> + 110</p>
    <p> <input id="oh" type="text" disabled> / <input id="ow" type="text" disabled></p>
    <p>   实际高度 = <input id="z" type="text" disabled>；</p>

    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            $('img').error(function(){
                $(this).parent().remove();
            });
            $('ul li img').each(function( k, img){
                console.log( $(this));
                $(img).attr('data-height', img.naturalHeight);
                $(img).attr('data-width', img.naturalWidth);
                $(img).css('top', 0-(img.height-img.width)/2);
                $(img).attr('src', img.src+'?'+Math.random());
            });
            $('#x').keyup(function(){
                var x, ow, h;
                x = parseFloat($(this).val());
                ow = parseFloat($('#ow').val());
                h = isNaN(x) ? '' : (2*x+110);
                $('#h').val( h);
                $('#z').val(h/110*ow);
            });
            $('img').click(function(){
                $('#oh').val( $(this).data('height'));
                $('#ow').val( $(this).data('width'));
            });
        });
    </script>
</body>
</html>