git 裁切_图片居中裁切.html

*{padding: 0;margin:0;}

body{font-size: 14px;color: #000;line-height: 1.8;}

.banner {

width: 375px;

height: 240px;

margin: 0 auto;

}

.banner img {

width: 100%;

height: 100%;

/*object-fit:cover;*/

object-fit:cover; /* none 改变图片原始尺寸 */

}

.newImg{width:300px;height: 600px;margin: 10px auto;}

.newImg img{width:300px;height: 200px;display: block;border:1px #000000 solid;margin-top: 40px;}

/* 图片居中溢出隐藏 */

.m-demo{position:relative;width:300px;height:300px;overflow:hidden;border:1px solid #ddd;}

.m-demo p{position:absolute;top:50%;left:50%;margin:0;padding:0;}

.m-demo img{position:absolute;top:-50%;left:-50%;display:block;}

.m-demo img.hidden{visibility:hidden;position:static;}

基材阿斯蒂芬四方达沙发上塔顶霜 阿斯蒂芬棋

asdfasd fasdf asf

塔顶地

模压阿斯蒂芬茜s adsfa sdfasdf asdf 基材阿斯蒂芬阿斯蒂芬

var width = 0,height = 0;

function toCenterImage(e) {

console.log(e.getAttribute('src'));

var img = new Image();

img.onload = function(){

width = img.width;

height = img.height;

setImg(e);

}

img.src = 'http://10.16.0.51:8848/H5%E5%8D%95%E9%A1%B5%E9%9D%A2/'+e.getAttribute('src');

// var hs, ws,

// img = e.currentTarget,

// w = img.clientWidth,

// h = img.clientHeight,

// parent = img.parentNode,

// pw = parent.offsetWidth,

// ph = parent.offsetHeight;

// w >= h ? (hs = h >= ph ? '100%' : h+'px', ws = 'auto') : (hs = 'auto', ws = w >= pw ? '100%' : w+'px')

// img.style.height = hs

// img.style.width = ws

}

function setImg(e){

var hs, ws,

w = width,

h = height,

parent = e.parentNode,

pw = parent.offsetWidth,

ph = parent.offsetHeight;

console.log(w+",H:"+h);

console.log(pw+",PH:"+ph);

w >= h ? (hs = h >= ph ? '100%' : h+'px', ws = 'auto') : (hs = 'auto', ws = w >= pw ? '100%' : w+'px')

e.style.height = hs

e.style.width = ws

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史