問題: Twitter の Bootstrap のレスポンシブ グリッド システムに画像を配置しようとしています。そのため、画像は指定されたスペースに縮小されます (レスポンシブ CSS の場合、列のサイズはデバイスによって異なります)。縦横比に収まるようにしたい - 正方形であると仮定しましょう。
Bootstrap でグリッド デザインに合わせて画像を再スケーリングする場合、標準の CSS トリミング手法は機能しません。負のマージンは、画像の高さをカットする必要があり、幅を変更しない場合 (たとえば、縦長の画像を正方形に配置する場合) に、上下の部分をカットする場合にのみ機能します。
縦横比を指定して高さを変更せずに幅を切り取る (横向きの画像を正方形に入れる)この手法は、Bootstrap のスケーリングでうまく機能することがわかりました。
サイズ 1600x400 および 400x1600 のトリミングされた画像の例 (jsfiddle) 。これまでのところ、現在の Chrome と Safari で確認しました。編集: Firefox でも動作するように修正しました。
質問:幅と高さの両方を 1 つの方法でカットするにはどうすればよいですか。Bootstrapによって適切に再スケーリングされるように、長方形を選択して画像を任意にトリミングする方法は? 画像のサイズを事前に知らなくても、特定のアスペクト比に切り抜くにはどうすればよいですか?
アイデアをありがとう！