我即将完成一个小型船舶图像数据库。正如您从下面的屏幕截图中看到的那样,我遇到的问题是,尽管我将 css 类固定为特定宽度,但卡片的尺寸都不同。我试图让所有卡片的宽度和高度都相同。我究竟做错了什么?
在与此问题相关的代码片段下方:
容器.js
export default function Vessel({ vessel }) {
const { name, slug, images /* size */ } = vessel;
return (
<div>
<article className="room">
<div className="img-container">
<img src={images[0] || defaultImg} alt="single" />
<Link to={`/vessels/${slug}`} className="btn-primary">
Features
</Link>
</div>
</article>
</div>
);
}
以及相关的App.css类:
.room {
display: block;
box-shadow: var(--lightShadow);
transition: var(--mainTransition);
}
.img-container {
position: relative;
}
.img-container img {
width: 100%;
display: block;
transition: var(--mainTransition);
}
到目前为止我做了什么:
我一直在尝试研究并找出为什么会发生这种情况的问题,但无法理解我做错了什么。我咨询了这个似乎很清楚的来源。我申请了,我得到的结果就是我发布的图片上的结果。
我也尝试
height
在css上添加属性,但这并没有改变问题.img 容器 img { 宽度:100%; 高度:100%;显示:块;过渡:var(--mainTransition);}
在某个时候,我怀疑这是一个可见性问题,但这也没有改变我的问题。而且我认为这不是可见性属性的问题。
在我看来,有一个(可能?)可以被覆盖的属性?或者也许这不是问题。感谢您指出如何解决此问题的正确方向。