すべての画像を同じサイズにします

Question

私のやり方では、my ideaの実装で、Bootstrapのカルーセルのスライドに画像をたくさん入れようとしています。しかし、元のサイズに関係なく、すべての画像の寸法が同じになるように、サイズを変更するには時間がかかりません。

img.resize{ 
    width:256px; 
    height: 256px; 
} 

あなたが見る、私はすべてにイメージをしたいと思い、同じ寸法を有している：ここでは

は、私がスライド1に問題を表示し、ここで一つだけ私が作った多くの試みのあるjsFiddleがあります視覚化の目的で使用します。どうやってするか？

つまり、私が望むのは、すべての画像が同じwidth x heightのサイズであることです。私たちがそれらを均質にするために寸法をトリムする神経層にそれらを通すように、それらのすべてが同じ箱に置かれたように！理想的なことは、the search engines give youのようなものを得ることです（高さはすべて同じですが、幅は少し違うかもしれませんがw.r.t.は害を及ぼさない視覚化になります）。

ここで、黒は黄色よりも短くなります。

Answer 1

使用max-widthと.itemクラスの高さを設定...とoverflow: hidden：1枚のスライドで

Fiddle

4画像：Fiddle。まっすぐな画像では、同じサイズにすることはできません。まあ、あなたがそれらを押しつぶして、ひどく見えるように絞っていない限り。

に4つの画像すべてを同じサイズにする場合は、画像タグをラップするdivなど、追加のマークアップが必要です。これは、Googleの画像のようなもので、画像タグをdivにラップし、そのdivのオーバーフローを隠す方法です。

現在のマークアップ内の4つのイメージのサイズを、それらのスライドの1つで正確に同じサイズにすることはできません。画像そのものを切り取ったり、部分を隠したりすることはできません。画像がになる原因となるのは、の周囲の要素です。オーバーフローを隠すことによってクロップされたが表示されます。