微信朋友圈长图居中展示。
丁均
微信朋友圈长图居中展示
下载地址：https://download.csdn.net/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.csdn.net/mdeditor/1.png)]</li>
<li>[外链图片转存失败(img-qrFJdyAn-1562222457788)(https://mp.csdn.net/mdeditor/2.png)]</li>
<li>[外链图片转存失败(img-6Vg8kSYO-1562222457791)(https://mp.csdn.net/mdeditor/3.png)]</li>
<li>[外链图片转存失败(img-IH2ASlMo-1562222457796)(https://mp.csdn.net/mdeditor/4.png)]</li>
<li>[外链图片转存失败(img-wIa0dGtQ-1562222457798)(https://mp.csdn.net/mdeditor/5.png)]</li>
<li>[外链图片转存失败(img-EfnCqx41-1562222457806)(https://mp.csdn.net/mdeditor/6.png)]</li>
<li>[外链图片转存失败(img-ThGttNSS-1562222457814)(https://mp.csdn.net/mdeditor/7.png)]</li>
<li>[外链图片转存失败(img-Uswflcbb-1562222457817)(https://mp.csdn.net/mdeditor/8.png)]</li>
<li>[外链图片转存失败(img-hIuniLn6-1562222457821)(https://mp.csdn.net/mdeditor/9.png)]</li>
<li>[外链图片转存失败(img-nPpqkoMO-1562222457824)(https://mp.csdn.net/mdeditor/1.jpg)]</li>
<li>[外链图片转存失败(img-p918HG8k-1562222457827)(https://mp.csdn.net/mdeditor/2.jpg)]</li>
<li>[外链图片转存失败(img-MbU4WqSZ-1562222457830)(https://mp.csdn.net/mdeditor/3.jpg)]</li>
<li>[外链图片转存失败(img-D7399YUA-1562222457831)(https://mp.csdn.net/mdeditor/4.jpg)]</li>
<li>[外链图片转存失败(img-6yzziG5Z-1562222457834)(https://mp.csdn.net/mdeditor/5.jpg)]</li>
<li>[外链图片转存失败(img-EdJI369T-1562222457836)(https://mp.csdn.net/mdeditor/6.jpg)]</li>
<li>[外链图片转存失败(img-Yz3WNcRS-1562222457838)(https://mp.csdn.net/mdeditor/7.jpg)]</li>
<li>[外链图片转存失败(img-cOCrPCeX-1562222457839)(https://mp.csdn.net/mdeditor/8.jpg)]</li>
<li>[外链图片转存失败(img-IThDOrgR-1562222457841)(https://mp.csdn.net/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>
类似资料：