产品图外边框CSS样式

产品图在任意尺寸下上传都保持不变形的情况下应设计的它的样式为如下代码:

.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”是给图片加的最大显示尺寸设置;且不应超过他上一级标签的宽和高;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值