之前一贯用的是背景图的办法来实现这个效果，可以这样做的一个弊端是不利于SEO 的优化，以是决定换种办法写，综合网上搜出来的文章，写了这个教程，供新手学习利用。
实现样式：
demo1
先上代码：
HTML构造
<div class=\公众wide\公众>
<div class=\公众img-wrap\"大众>
<div>
<img src=\"大众./test_img.jpg\"大众 />
</div>
</div>
<p class=\"大众goods-name\"大众>商品名称</p>
</div>
CSS样式
.wide {
width: 60%;
height: auto;
margin: 0 auto;
border: 1px solid #f2f2f2;
}
.wide .goods-name {
width: 100%;
height: 28px;
font-size: 14px;
padding: 0 10px;
box-sizing: border-box;
background-color: #fff;
}
.img-wrap { /重点从这里开始/
width: 100%;
height: 0;
padding-bottom: 60%;
overflow: hidden;
position: relative;
background-color: lightgray;
}
.img-wrap > div {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrap > div img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
简要解释：
1、.img-wrap 的 padding百分比值是相对付宽度的，这样我们就可以按照图片的比例来设置高度啦！
height=0,padding-bottom=100% 恰好是一个正方形（这里设置为60%）；设置相对定位是为了 能够使子元素 基于它设置宽高（这样padding的值司帐算在内，不然子元素的高度设置百分比时只会是我们写的‘height: 0’）;
2、图片宽高 { width: auto; height: auto; max-width: 100%; max-height: 100%; } 这样图片可以自适应按父元素宽高档比例显示；
3、至此图片自适应就写好了，下面便是居中；
4、居中的方法很多；我这里用了flex布局，很随意马虎就可以实现，如果要兼容IE和多版本浏览器请用其它居中方法实现；
补充：在设置图片时，可以把宽、高都设置成100%，然后利用CSS比较新的属性 object-fit 来实现图片按比例自适应居中显示。
