image - 图像上的边界半径..(圆 Angular )

Question

尝试为图像添加圆 Angular ，也有边框。

想出了以下内容:

http://jsfiddle.net/tgqBG/

但是图片下方的空白看起来一点都不好，而且边框和图片的 Angular 也不匹配。我做错了什么吗？

谢谢，卫斯理

Answer 1

在.thumb_container中添加overflow:hidden;，在image中添加vertical-align:bottom;

您可以删除很多其他值，这是一个更新的 jsfiddle:

http://jsfiddle.net/tgqBG/12/

另一种方式(更多浏览器支持)是通过 background-image 显示图像。在我的评论中，我说这会造成问题，因为该元素需要固定尺寸，但我刚刚意识到可以通过将图像放在那里但隐藏它来轻松解决这个问题。

http://jsfiddle.net/tgqBG/51/

如果没有 float，这将不起作用，因为它将获得 100% 的宽度。这是因为 div 的自动属性会呈现为 block。

要解决此问题，请将 div 更改为 span，然后添加 display:inline-block;。

http://jsfiddle.net/tgqBG/52/