divに画像を合わせる

Question

divに画像をフィットさせることに問題があります。基本的にdivはカードヘッダーです。写真の向きや大きさも異なります。私はそれらを合わせるために何をすべきですか？

Photo in div

Answer 1

問題を修正しました。私はdivにクラスを割り当てました。

とCSSの

<div class="fill"> 
 
    <img src="..."> 
 
</div>

。

.fill { 
 
    max-width: 70%; 
 
    height: 100%; 
 
} 
 

 
.fill img { 
 
    width: inherit; 
 
    height: inherit; 
 
}

Answer 2

私はこのトリックを使用して、私のために本当によく働く：

<div class="card" style="background-image: url(...)"></div> 

とCSS：

.card { 
    background-size: cover; 
    height: 400px; 
    width: 600px; 
} 

ポイントがcover背景を使用して画像を拡大縮小することです画像の大部分を表示し、div全体をカバーするサイジング方法で、アイテムのサイズが一定になるようにします。

Answer 3

あなたはこれらのオプションの両方を試すことができます。

.card-image { 
    background: url(...); 
    background-size: cover; 
} 

2つのノートを： - カバーをサポートしていないブラウザの約7％に。 - 'fixed'をバックグラウンドで使用すると、予測できない問題が発生する可能性があります。 - background-size：を入れて、より良い結果が得られるかどうかを確認することもできます。

また、画像の読み込みを開始するときにドキュメントの再描画を避けるため、画像が読み込まれるまで空き領域を確保することをお勧めします。

.card-container { 
    position: relative; 
} 

.card-image { 
    padding-bottom: 56.25%; //for 16:9 ratio 
} 

.card-image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 4

object-fitのアプローチがあります。

塗りつぶし：アスペクト比を無視して、画像を親に合わせて伸ばします。

：アスペクト比を維持しますが、画像のサイズを増減することがあります。低解像度の拡大縮小が歪む可能性があります。

カバー：画像のアスペクト比を維持し、親コンテナに適合しますが、画像を切り抜く可能性が最も高くなります。

.img-container { 
 
    height: 300px; 
 
    width: 400px; 
 
    background-color: yellow; 
 
} 
 

 
.cover { 
 
    object-fit: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.contain { 
 
    object-fit: contain; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.fill { 
 
    object-fit: fill; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<h1>Cover</h1> 
 

 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="cover" /> 
 
</div> 
 

 
<h1>Contain</h1> 
 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="contain" /> 
 
</div> 
 

 
<h1>Fill</h1> 
 
<div class="img-container"> 
 
    <img src="http://i.stack.imgur.com/BPfiX.jpg" class="fill" /> 
 
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 5

私はあなたが欲しいものを推測しています、私はまた、あなたがあなた自身の質問に答えてきたポストを見てきました。他にも解決策が1つあります。あなたはそれで遊んで、コンテナwidthとheightを異なる値に設定することができます。私は2枚の写真を使用しました。 1つはheight>width、もう1つはheight<widthです。 はここにいくつかのマークアップを提供してくださいまた、fiddle

.img-container { 
 
    border: 2px dashed #f00; 
 
    line-height: 0; 
 
    text-align: center; 
 
} 
 
.img-container img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="img-container"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Doctor_Who_-_Current_Titlecard.png" alt="drwho"> 
 
</div> 
 
<div class="img-container"> 
 
    <img src="https://lh4.googleusercontent.com/-MkDsiF5-BXQ/AAAAAAAAAAI/AAAAAAAAKv0/dRBJk-2PGw4/s0-c-k-no-ns/photo.jpg" alt="who2" />