多图的话, 可以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来控制, 尺寸有了, 位置自己写一个算法即可

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

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

<p style="background-image:url(images/goods.jpg)"></p>
p{
  width:400px;
  height:400px;
  background-positon:center;
  bgckground-size:cover;
}

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

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