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

Question

我正在构建一个全栈，服务器端渲染的反应电子商务应用程序。但是，由于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%;
  width: 100%;
}

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

Answer 2

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

试试这篇文章，希望对你有帮助。