固定画像サイズを維持しながらレスポンシブ デザインを実現するにはどうすればよいでしょうか?
<p>次の CSS (Bootstrap を使用) を使用して画像のサイズを変更し、伸ばさずに 16:9 コンテナに収まるようにします。 </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>この方法は機能しますが、Bootstrap グリッドで使用すると、画像がグリッドからはみ出します (サイズを絶対値で固定したためだと思います)。画像のサイズをオーバーフローさせずにサイズ変更するにはどうすればよいですか? </p>
<p>(背景情報: これはギャラリー コンポーネントで使用されています。受信する画像のサイズが異なる可能性があるため、同じサイズのコンテナに表示するにはすべてのサイズを変更する必要があります。上部に黒い画像が表示されたり、下余白)</p>
