欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

引導卡組件下的圖像比例錯誤

謝彥文2年前8瀏覽0評論

所以我正在做一個電子商務購物車的個人項目。我試圖為產品部分的卡片組件添加一些圖像。我不確定我應該如何確定如何使它們完全適合自舉卡組件的映像部分。我會放一些截圖,這樣問題就更清楚了。

這是代碼現在的樣子-

<Card>
    <Card.Img variant="top" src={imgUrl} height="200px" style={{ objectFit: 'cover' }} />
</Card>

因此,我嘗試了一些不同的東西,比如將objectFit改為cover,并添加maxHeight、maxWidth等等。但是它從來沒有讓圖像適合。 第一個包含objectFit的圖像- 圖1 第二個以objectFit為封面- 圖2

現在,由于物體會循環,我不能對每張圖片都這樣做,我該如何去糾正這一點呢?我是否應該為我選擇的圖片制定一個規則,比如特定的尺寸或背景,這是大多數電子商務網站通常的做法嗎,或者我是否應該改變引導卡組件的某些事情(很確定這只是一個css問題)?).

此外,我正在遵循一個教程,這是一個有點舊,將感謝幫助,如果bootstrap是舊的,如果它已經改變,或者我應該做它的某些其他方式。