高度和宽度属性不适用于 html img 元素

Question

我正在构建一个完整的堆栈、服务器端渲染的 React 电子商务应用程序。然而，由于 css 是我的弱点，我尝试构建产品卡而不是使用库模板。但是问题是我无法弄清楚如何让img 元素覆盖 div。当我放置 height 和 width 属性时，img 消失了。对你们中的许多人来说，这可能是一个简单的问题，但我想不通:(

这里是 react 组件代码：

<div className="card-body ">
          <div className="card-img-container">
            <img src={imageUrl} alt={name} className="card-img" />
          </div>


<div className="card-footer">
          <span className="name">{name}</span>
          <span>
            <div className="price-and-dollar">
              <span className="dollar-sign">$</span>
              <span className="price"> {price}</span>
            </div>
          </span>
        </div>
</div>

这是css：

.collection-item {
  background-color: $gray-700;
  display: flex;
  flex-direction: column;
  width: 23vw;
  .card-body {
    width: 94%;
  }
}
.card-img-container {
  height: 100%;
  width: 100%;
}
.card-img {
  height: 100%;
  width: 100%;
}

这是结果

Answer 1

.card-img-container {
  height: 100% !important;
  width: 100% !important;
}
.card-img {
  height: 100% !important;
  width: 100% !important;
}

试试这个希望对你有帮助

Answer 2

你可以试试

.card-img-container {
  height: 100%;
  width: 100%;
}

div.card-img-container > img {
 height: 100%;
 width: 100%;
 }