html - 画像 - CSS、HTML

Question

画像を表示しようとしていますが、いくつか問題があります。

私の画像はさまざまなサイズであり、解像度の問題やレイアウトの空間的な問題を回避する最善の方法を知りたいと思っていました.

大きい/小さい画像があり、400 x 360 ピクセルで必要なことがわかります... 一部は引き伸ばされ、一部は奇妙になります (大きな画像を 1 つの小さな画像に縮小してみてください)。

さまざまなサイズの画像を取得し、サイトのレイアウトに固定スペースがある場合、画像を処理する最良の方法は何ですか?

考えられる解決策を試してみましたが、それでも伸びます...

 #divDisplayingImg img{
   width:500px;
height:360px;
border:solid medium white;
border-radius:5px;
border-width:8px;
background-size: cover;
overflow:hidden;
   }

Answer 1

background-size
css プロパティの例 を使用する必要があると思います: background-size: cover;
400px x 360px をカバーし、オーバーフローをトリミングします。

Answer 2

「画像が引き伸ばされて奇妙になる」とあなたが呼ぶものはよくわかりません。元の画像の比率が異なる場合、歪みを防ぐために、

最大幅: 450px; 最大高さ:360px;

元の比率を維持し、歪みの可能性を回避するのに役立ちます。

Answer 3

Try this

#divDisplayingImg
{
 width:500px;
 height:360px;        
 overflow:hidden;
}

#divDisplayingImg img
{
 width:100%;
 border:solid medium white;
 border-radius:5px;
 border-width:8px;
 background-size: cover;
 overflow:hidden;
}