web-dev-qa-db-ja.com

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

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

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

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

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

それはこの混乱をもたらします：

enter image description here

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

enter image description here

Divに合うように画像を引き伸ばす方法はありますか？しかし、アスペクト比が維持される方法では？自動トリミングが必要です。

htmlimagecssaspect-ratio
17
JZ.

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

background-size: 175px auto;

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

background-size: cover;

または：

background-size: contain;

MDCには良い説明があります。

32
robertc

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

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


<img src="your-photo.png">
5
Brian D

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

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

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

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

2
Harish_N

background-sizeプロパティをcontain値とともに使用できます。

background-size: contain;

これが実際の例です： https://jsfiddle.net/gusrodriguez/auuk97hf/1/

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

1
Gus Rodriguez