固定画像サイズを維持しながらレスポンシブ デザインを実現するにはどうすればよいでしょうか?
P粉739706089
P粉739706089 2023-08-16 14:35:27
0
1
373

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


      <画像 :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="最大幅: 100%; 最大高さ: 100%">

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

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

P粉739706089
P粉739706089

全員に返信 (1)
P粉191610580

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

リーリー
いいねを押す+0
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!