固定画像サイズを維持しながらレスポンシブ デザインを実現するにはどうすればよいでしょうか?

Question

次の CSS (Bootstrap を使用) を使用して画像のサイズを変更し、伸ばさずに 16:9 コンテナに収まるようにします。

<span class="bg-dark d-flex justify-content-center align-items-center style="width: 384px;
高さ: 216px">
                <画像
                  :src="slotProps.item.itemImageSrc"
                  :alt="slotProps.item.alt"
                  style="最大幅: 100%; 最大高さ: 100%"
                />
              </span>

この方法は機能しますが、Bootstrap グリッドで使用すると、画像がグリッドからはみ出します (サイズを絶対値で固定したためだと思います)。画像のサイズをオーバーフローさせずにサイズ変更するにはどうすればよいですか?

(背景情報: これはギャラリー コンポーネントで使用されています。受信する画像のサイズが異なる可能性があるため、同じサイズのコンテナに表示するにはすべてのサイズを変更する必要があります。上部に黒い画像が表示されたり、下余白)

Answer 1

この問題を解決するには、object-fit CSS プロパティを使用します。 object-fit 属性は、コンテナに合わせて画像のサイズを変更する方法を指定します。カバー値により、アスペクト比を維持しながらコンテナ全体に収まるように画像のサイズが変更されます。

リーリー