英文:
How to render images with proper dimension(width and height) in a grid system of React JS
问题
我正在制作一个电子商务网站，在这个网站上我需要放置产品的图片。所以我在React中使用了简单的CSS Grid系统，但在渲染图片时，它们呈现出不同的大小，因为我从网上获取了图片，所以它们没有以适当的方式调整。
请检查我的代码：
return (
<>
<div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridGap: "10px",
alignContent: "center", padding: "20px", margin: "20px" }}>
{filteredClothing[0].products != null &&
filteredClothing[0].products !== undefined &&
filteredClothing[0].products.map((item) => (
<>
<div style={{}}>
<Card
className="card_image"
key={item.id}
style={{ width: "70%", height: "100%", padding: "10px", margin: "10px" }}
>
<div style={{ display: "flex", flexDirection: "column", flexWrap: "wrap" }}>
<div>
<CardMedia
component="img"
image={item.image}
alt={item.name}
></CardMedia>
</div>
<div>
<p>Cost: {item.price}</p>
<p>{item.description}</p>
</div>
</div>
</Card>
</div>
</>
))}
</div>
</>
);
在UI中，它看起来像这样：UI中的产品图片
所以我尝试在DOM中定位元素，但图片的大小没有改变，例如，帽子的图片根据其大小呈现，并且挂在顶部。但我希望内容适应卡片，并且图像大小在整个应用程序中保持不变。
我还需要一个建议，如果我使用来自Web的图片，所以为什么会出现这种情况，或者我应该如何获取图片（例如从本地）？请为我提供指导。
谢谢！
英文:
I am making a eCommerce site where I have to put images of products. So I am using simple CSS Grid system in React but while rendering images they are coming in different sizes , as I have taken images from Web , so they are not adjusting in proper way
Please check my code
return (
<>
<div style={{ display: "grid", gridTemplateColumns: "repeat(4 ,1fr)", gridGap: "10px",
alignContent:"center",padding:"20px",margin:"20px" }}>
{/* <h1 style={{ color: "green" }}>This is a Clothing Page.</h1> */}
{filteredClothing[0].products != null &&
filteredClothing[0].products !== undefined &&
filteredClothing[0].products.map((item) => (
<>
<div style={{}}>
<Card
className="card_image"
key={item.id}
style={{ width: "70%", height: "100%", padding: "10px",margin:"10px" }}
>
<div style={{display:"flex",flexDirection:"column",flexWrap:"wrap"}}>
<div>
<CardMedia
component="img"
image={item.image}
alt={item.name}
></CardMedia>
</div>
<div>
<p>Cost: {item.price}</p>
<p> {item.description}</p>
</div>
</div>
</Card>
</div>
</>
and inUI it is looking like this
Products Image in UI
So I have tried to position elements in DOM but size of image is not changing , for example in Hat image it is rendered according to its size and it is hanging on top
But I am expecting to fit content in the Card and Image size should be constant throughout the application
and I need one more suggestion, if I am using images from Web so thats why it is happening like this or how I have to take images (like from local) ? Please guide me for this also
Thanks
答案1
得分: 0
This issue got solved by writing CSS property object-fit - "contain", please check below code:
<CardMedia
component="img"
image={item.image}
alt={item.name}
style={{
width: '300px',
height: '400px',
objectFit: 'contain',
cursor: 'pointer',
}}
onClick={(event) => showProducts(event, item.id)}
></CardMedia>
英文:
This issue got solved by writing CSS property object-fit - "contain" , please check below code:
<CardMedia
component="img"
image={item.image}
alt={item.name}
style={{
width: '300px',
height: '400px',
objectFit: 'contain',
cursor: 'pointer',
}}
onClick={(event) => showProducts(event, item.id)}
></CardMedia>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论