html - CSSアスペクト比に合わせて維持するために、どのようにストレッチしますか？

Question

私は次のCSSを持っています：

.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}

これはこのHTMLに対応します。

<div class="mod left"></div>

その結果、この混乱が発生します。

ここに画像の説明を入力してください

css3 background-sizeを使用する場合：175px 160px; アスペクト比が実際に台無しになり、次のような混乱が発生します。

ここに画像の説明を入力してください

divに合わせて画像を引き伸ばす方法はありますか？しかし、アスペクト比が維持される方法では？オートクロップが欲しいです。

score 36 · Accepted Answer

これは機能するはずです（をサポートするブラウザでbackground-size）：

background-size: 175px auto;

また、試すことができます：

background-size: cover;

または：

background-size: contain;

score 5 · Accepted Answer

背景画像である必要がありますか？

img{
width:300px;
height:auto;
}


<img src="your-photo.png">

score 3 · Accepted Answer

次の値でbackground-sizeプロパティを使用できます。contain

background-size: contain;

上記の例では、ボディの背景に引き伸ばされた画像があります。また、任意のサイズの2つのdivと、アスペクト比に適合して維持する別の画像があります。

score 2 · Accepted Answer

CSSObject-fitプロパティを使用できます。

{
 height: 160px;
 width: 175px;
 object-fit: cover;
}

Object-fitには、次の値を指定できます。

含む、カバーする、塗りつぶす、なし、スケールダウン。詳細については、上記のリンクを参照してください。

score 1 · Accepted Answer

背景ではなくimgを使用している場合、この方法を見つけました。

        min-width: 100%;
        max-width: 100%;
        min-height: 100%;
        max-height: 100%;
        object-fit: contain;

5 に答える 5