Question

我想要一张带有未调整尺寸图像且背景为灰色的卡片。卡大于图像的大小。我有背景和图像，但是我无法防止图像调整大小。

<div className ="container" id="mainContainer">
  <div className ="row mt-4">
    <div className="col-md-4">
      <div className="card" >
        <img  className="card-img-top bg-light mb-3" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
         </img>
         <div className="card-img-overlay">
           <span className="badge badge-dark"> 1 </span>
         </div>
         <div className="card-body">
           <h5 className="card-title"> Bulbasur  </h5>
           <span className="badge badge-light"> poison </span>
         </div>
      </div>
  </div>
</div>

我想要这个

但是我明白了

Answer 1

将图像放入其自己的容器DIV中，并使用w-auto覆盖card-img-top的width：100％行为

         <div class="card">
            <div class="text-center bg-light">
                <img class="card-img-top mb-3 w-auto" alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
            </div>
            <div class="card-img-overlay">
                <span class="badge badge-dark"> 1 </span>
            </div>
            <div class="card-body">
                <h5 class="card-title"> Bulbasur  </h5>
                <span class="badge badge-light"> poison </span>
            </div>
        </div>

https://www.codeply.com/go/ACgUKJQMea

Answer 2

在您自己的CSS文件中，为.img-sensitive添加其他定义

.img-responsive 
{ 
    width:100%;
}

将代码替换为

<img  className="card-img-top bg-light mb-3 img-responsive " alt="" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png">
</img>

防止在引导卡中调整图像大小

2 个答案: