0

ユーザーが画像をアップロードするウェブサイトがあります。画像処理はサーバー上で行われ、サイズは400px*400pxです。画像は、コントロールできない元のサイズとは異なる場合があります。それらを表示するとき、200px *200pxdivに正しく配置できません。絞ったり伸ばしたりするか、スペースのようなレターボックスを残します。ここでの優先事項は、適切な比率を維持し、中央に配置することを犠牲にして画像をトリミングすることです。そうするためのjquery/cssの既知のメソッドはありますか？

編集

.container{width:200px; height:200px;}
.container img{width:100%;}

これは私が見つけた最も近い解決策でしたが、まったく満足のいくものではありませんでした（高さ/幅は写真によって明らかに変化します）...現在、画像を「拡大縮小」するためにレターボックスを使用しています。PhotoStackで使用されるPixelDailyのフォトスタックプラグインもあります

4

2 に答える 2

0

画像の高さと幅を100％にする

試す

.imgClass{  //your class name
height:100%;
width:100%;
}
于 2013-01-02T19:46:28.327 に答える
0

最新のブラウザー (IE8 以下ではない) の場合、background-sizeプロパティ「cover」を background プロパティ inline と組み合わせて使用​​するだけで css を使用してこれを実現できます。

 <ul>
    <li style="background:url('image/path.jpg') center center;background-size:cover"></li>
    <li style="background:url('image/path.jpg') center center;background-size:cover"></li>
</ul>

http://jsfiddle.net/EXpb2/1/

于 2013-01-02T22:41:44.913 に答える