私はWordpress Stack ExchangeやWebmaster Stackの同様の質問に答えました。私はここにそれを掲示して、より多くの人々を明確にし、助けることを意図しています。 (管理者/モデレーター:許可されていない場合は、適切な方法を教えてください)。
実際には、htmlに幅と高さを指定する必要はありません。それが意味することは、あなたが適切なスペースを確保しなければならないことと、画像がロードされると、ブラウザはページをリフローして再ペイントする必要がないということです。
また、ディメンションをハードコーディングすると、応答するビヘイビアを破ることができます。あなたのレイアウトが応答していない場合、それは問題ありませんが、応答性を維持したい場合は、CSSだけを使用して結果を得ることができます。
ほとんどの場合、widthと max-width:100
の両方を使用して作業しますが、
次のステップは、コンテナ内に画像を配置し、コンテナをいっぱいにすることです。これを行うには、イメージをコンテナ内に絶対配置する必要があります。例: "
.img-container {
padding-bottom: 56.25%; /* 16:9 ratio */
height: 0;
background-color: black;
}
.img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}