javascript - 关于js控制图片显示的问题，急求，谢大神！！！

Question

页面上有一个栏目，该DIV层大小固定，比如400400，照片需要经常替换，照片的尺寸不固定，可能是横版也可能是竖版的。如何设置JS+CSS，使照片只显示400400像素（照片主体内容需显示完整），四周隐藏，而不致图片失...

ringa_lee · Answer

多图的话, 可以js 每次切换缓存一个图片

var image = document.createElement( "img" );
image.src = "https://gss0.bdstatic.com/7051cy89QMgCncy6lo7D0j9wexYrbOWh7c50/liuwei/80x120.gif?t=1480320379589"

console.log:

image.height
120
image.width
80

然后再在你需要显示的p中通过backgroud指定图片的position来控制, 尺寸有了, 位置自己写一个算法即可

PHPz · Answer

直接把img 宽度设成100% 就可以了，撸主试试

ringa_lee · Answer

这样。。不知你对兼容性要求如何。


p{
  width:400px;
  height:400px;
  background-positon:center;
  bgckground-size:cover;
}

伊谢尔伦 · Answer

p {
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 400px;
  max-height: 400px;
  transform: translate(-50%, -50%);
}

不知道这样是不是你要的效果