cssを使用してdivに収まるように画像をスケーリングしようとしています。画像の幅と高さが等しい場合は問題なく動作しますが、幅が高さより大きい場合、またはその逆の場合、問題が発生します。
#container{
-webkit-border-radius: 80px 80px 80px 80px; /*makes the div a nice circle */
-moz-border-radius: 80px 80px 80px 80px;
border-radius: 80px 80px 80px 80px;
float:left;
height:150px;
width:150px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#picture{
-webkit-border-radius: 80px 80px 80px 80px; /*makes the image a nice circle*/
-moz-border-radius: 80px 80px 80px 80px;
border-radius: 80px 80px 80px 80px;
float:left;
height:auto;
width:100%;
cursor:hand;
cursor:pointer;
}