アスペクト比を強制的に強制する方法 - css

Question

cssでは、あるサイズのdivに強制することなく画像を自動的にトリミングして縦横比に合わせる方法がありますか？私は、動的に生成され、上部といくつかのテキストの画像を含むいくつかのサムネイルを持つページを持って、それらは画面上の行に表示されます。画像サイズが非常にわずかにばらつくと、レイが乱れることがあります。私はユーザーの画像を受け入れているので、ちょうど1つではなく、正しいアスペクト比のサイズの範囲を受けたいと思っています。画像の幅と高さを使用するdivは、スペースの使用率と読みやすさを最大限に引き出すために、異なる数値と異なる画面サイズで表示されます。私はオブジェクトフィットを見てきましたが、divがサイズ変更するにつれて、これはうまくいかないようです。画像にはわずかな、ほとんど検出不可能なサイズの違いがあり、レイアウトを狂わせます。

編集：サイズを指定せずに、高さと幅をお互いの割合にしたいと思います。例：画像の高さを幅で割った値が1.4で、これを真にするには画像を切り抜く必要があります。

Answer 1

コードやスクリーンショットの例がなくても、正確に知るのは難しいですが、問題の原因となっている幅（以前の経験に基づく）よりも高さを前提とすると、これは機能しますか？ https://jsfiddle.net/v05a1ngt/1：画像は、コンテナに包まれている場合は

img {height: 80px; width: auto; max-width: 120px;} 
/* adjusting the size for the width you want. */ 

することは、あなたが唯一の画像の高さをトリミングする必要がある場合は、次はうまくいく

max-width: 100%;