1

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

3 回答 3

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

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

于 2013-09-01T18:15:34.573 回答
0

默认情况下，您的浏览器会将其最大程度地缩放到原始大小。将您的idoverflow属性设置为裁剪图像。containerhidden

  • 对于较小的容器 - 使用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);
    }
于 2013-09-01T18:16:15.497 回答
0

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

于 2013-09-02T18:24:31.350 回答