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%;
}

这将使图像始终为最大值之一

Answer 2

默认情况下，您的浏览器会将其缩放到最大尺寸。将overflow ID的container属性设置为hidden以裁剪图片。

对于较小的容器 - 请使用overflow:hidden;
对于图像大小的容器 - 这是浏览器自动执行的操作
对于较大的容器 - 您可以设置background-repeat属性

  #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;
        overflow:hidden;
        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);
    }

Answer 3

好的，最后我解决了这个问题。首先我用php来获取图像的高度和宽度。然后比较他们两个。在那之后，在我的情况下，如果宽度大于高度，我在css中将高度设置为100％，如果高度大于宽度，我将宽度设置为100％。

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

3 个答案: