定尺寸显示头像

在网页上有一个方框用来显示头像，当头像大小正好的时候没有问题，可是当头像尺寸与输入框不一样的时候，尤其是头像不是方的时候，就会有很大的问题。

以下是代码和效果：

<html>

<head>

#container

{

height:50px;

width:50px;

border:solid 1px black;

overflow:hidden;

}

</style>

</head>

<body>

</div>

</body>

</html>

原图片如下：

可以看到，只显示了一半。

当然，还有另一种方案，就是设置图片的大小，但是这样图片就会变形。

由于大部分头像都是高度大于宽度，如何让图片按照宽度自适应，高度上多出的部分切掉那？

以下是实现的代码和效果。

<html>

<head>

#container

{

height:50px;

width:50px;

border:solid 1px black;

overflow:hidden;

}

#container img

{

width:100%;

}

</style>

</head>

<body>

</div>

</body>

</html>

换一张图片试试。

原图片：

网页上的效果：

当然，如果要显示的图片宽度大于高度，并且想让图片按照高度自适应的话，只要将height设置成100%就可以了。不过这种情况很少见。

posted on 2012-03-20 11:05 今夜太冷阅读(545) 评论(0) 收藏举报