标签：设置 image 结构 height 样式 blog 元素 jpg css
假设这是一个头像图片，假设展示头像的框为100*100的div，而图片尺寸为510*765，如何让图片显示成这样呢？
html结构很简单：
<div class="img"> <img src="../images/eye.jpg"> </div> <h5>吉米</h5>
忽略那个h5，其实样式非常简单哦！
首先，父元素定固定宽高100*100（或者百分比），图片根据需求设置100*120（如果父元素百分比也用百分比）。
父元素设置overflow:hidden;border-radius:50%;
最后，注意到图片有一圈灰色吗？只是一个border而已。
父元素设置border:3px solid #999;
大功告成。
>.img{ margin:0 auto; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; border:3px solid #999; >img{ width: 80px; height: 100px; }
大概就是这样啦。
标签：设置 image 结构 height 样式 blog 元素 jpg css
原文地址：http://www.cnblogs.com/QH-Jimmy/p/6507432.html
