html css3不拉伸图片显示效果游戏攻略

1.利用transform属性不拉伸显示图片,(路径问题需要按需求修改）；

html:

CSS:

#surface-div1{ %20%20%20%20position:%20relative; %20%20%20%20width:%20372px; %20%20%20%20height:%20175px; %20%20%20%20float:%20left; %20%20%20%20margin-top:%20-34px; %20%20%20%20margin-left:%20122px; %20%20%20%20cursor:%20pointer; %20%20%20%20background:%20url(../../../static/img/addheadpic.jpg)center center no-repeat; text-align: center; border: 1px solid #CCCCCC; border-radius:6px; overflow: hidden; } #surface-div1 img{ position: absolute; width: 100%; top: 50%; left: 0; transform: translateY(-50%) scale(1); border:none; border-radius: 6px;display:table-cell }

这里写图片描述

最终效果如上图的左边。

2.参考淘宝的，利用display:table-cell和文字大小控制居中

html:


  
     
%20%20

css:

#surface-div{ %20%20%20%20position:%20relative; %20%20%20%20width:%20372px; %20%20%20%20height:%20372px; %20%20%20%20float:%20left;%20 %20%20%20%20margin-top:%20-34px; %20%20%20%20margin-left:%20122px; %20%20%20%20cursor:%20pointer; %20%20%20%20background:%20url(../../../static/img/addheadpic.jpg)center center no-repeat; text-align: center; border: 1px solid #CCCCCC; border-radius:6px; overflow: hidden; } .sur-div{ display: table-cell; text-align: center; vertical-align: middle; font-size: 12px; width: 372px; height: 372px; overflow: hidden; } #surface-div img{ max-height: 100%; max-width: 100%; vertical-align: middle; border: 0; }

这里写图片描述