cssトリミング画像アスペクト比

私はアスペクト比と解像度が異なる3つの画像と3つの画像を持っています。私は幅を設定しました：100％;それぞれが高さを持つように各画像の底を切り抜きたい：600px;cssトリミング画像アスペクト比

私はこれを試してみたが、それは圧縮につながるか、IMG

img{ 
    width: 100%; 
    max-height: 600px; 
    overflow: hidden; 
}

2016-05-15 Gatto

状況をよりよく理解できるように、jsFiddleにサンプルHTMLコードを追加してください。 :)質問があいまいだと思われます： – Narxx

使用height: autoの延伸、max-width: 600pxを消去しoverflow: hiddenを残します。

2016-05-15 11:03:05 Johannes

何も起こらない – Gatto

おそらくあなたの画像はその特定の状況で600px以下です。あなたはそれらを引き伸ばす（=ゆがんで）望んでいないのですか？ – Johannes

代わりの解決策として、画像をコンテナの背景画像（つまり、<img>タグなし）として定義し、background-size: cover;とbackground-position: centerを使用することができます。

2016-05-15 11:11:49 Johannes

これはアスペクト比を保存しません。画像は画面の解像度に応じてトリミングされます（ゆがんではありませんが、依然として適切に質問に答えません）。 – Narxx

画像のアスペクト比を保存します（幅：100％と高さ：100％ではなく）。コンテナのアスペクト比に応じてコンテナを完全に満たし、画像の一部の部分をカットします。それとは別に、これは画面の解像度とは関係がありません。OPは画像が入った3つの列について話しています。 – Johannes

'background-size：cover'は常に、片側（始点のデフォルトの左上の位置であれば、下または右のいずれか）から切り取られたピクチャの部分に従います。つまり、画像が切り取られたときには、アスペクト比が保持されません。少なくとも、これは私がそれを理解する方法です。 – Narxx

答えて