css - css中的图像高度和宽度缩放

Question

我一直在尝试使用 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;
}

Answer 1

img{
    max-width:100%;
    max-height:100%;
}

这将使图像始终是最大图像之一。