产品图在任意尺寸下上传都保持不变形的情况下应设计的它的样式为如下代码:
.gongdt a{color:#545454; width:150px; height: 220px; border: 1px solid #CFCFCF;display:table-cell;vertical-align: middle;}
注:在这里a标签为img的上一级,图片的大小也受它边框大小的限制,又因为a标签为内联元素必须设置一个固定的宽度和高度,使内联元素变成块级元素加属性display:block;让它浮动即可;属性:“display:table-cel” 指让标签元素以表格单元格的形式呈现,因为只有在它为表格的情况下才可以设置他的垂直居中属性;
而此属性“vertical-align: middle”就是让图片垂直居中显示; 切忌设置了display:table-cell的元素对宽度高度敏感,对margin值无反应,响应padding属性
.gongdt img{ max-width:148px; max-height:218px;}
注:在这里设置的图片宽高属性前加“MAX”是给图片加的最大显示尺寸设置;且不应超过他上一级标签的宽和高;