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

OKついに問題を解決しました。まず、php を使用して画像の高さと幅を取得しました。続いて両者を比較。その後、私の場合、幅が高さよりも大きい場合は、css で高さを 100% に設定し、高さが幅よりも大きい場合は、幅を 100% に設定します。

于 2013-09-02T18:24:31.350 に答える