html - 歪みなしで異なる画像のサイズを変更する

Question

すべての画像には 1 つの共通点があります。それらはすべて 300 または 600 ピクセル幅です。ただし、高さは約 300 ～ 900 ピクセルです。ここで、ユーザーに他の画像を提案するために使用される画像の小さなグループが必要です。これらは約 100x200 ピクセルになります (変更される可能性があります)。私の以前の試みでは、画像が 100x200 の縦横比に縮小されました。オーバーラップする必要がありますが、余分な部分は隠されています。

Answer 1

このようなものを試してみてくださいhttp://dabblet.com/gist/2769112

必要なCSSは単純です

.img-container {
    width: 200px; /* whatever set width */
    height: 100px;
    display: inline-block; /* or you could float them */
    overflow: hidden;
}
.img-container img {
    width: 100%;
}

Answer 2

高さと幅が定義された DIV などのラッピング要素に画像を配置し、 を使用しますoverflow:hidden。