如何根据引导卡中的宽度和高度调整图像？

Answer 1

你的方法没问题。问题是，引导类属性往往有

!important

。

因此将自定义 style.css 放在 bootstrap.css 下，这样它比 bs 具有更高的优先级，

然后使用：

.my-image{
  height : 300px !important;
  width: 300px !important
}

将图像与类

.my-image

绑定，清除内联CSS样式，然后检查这一点。

Answer 2

 .clsImg{
  max-width:100%;

  width: 100%;
  height: auto;
  object-fit:cover;
  }

Answer 3

使用

img-fluid

表示图像，您还可以使用

w-25 w-50 w-100

表示

lg

、

md

、

sm

等设备

@media (min-width: 768px) {
  .w-md-50{width:50% !important;}
}
@media (min-width: 992px) {
  .w-lg-75{width:75% !important;}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
    <div class="row pt-5 w-100 mx-auto">
        
        <!-- Card Start From Here -->
        <div class="col-lg-4 col-md-6 col-sm-6 mb-4">
            <div class="card p-4">
                <div class="row">
                    <div class="col-6">
                        <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/>
                    </div>
                    <div class="col-12">
                       <div class="card-body px-0 pb-0">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>
             </div>
        </div>

        <!-- Card Start From Here -->
        <div class="col-lg-4 col-md-6 col-sm-6 mb-4">
            <div class="card p-4">
                <div class="row">
                    <div class="col-6">
                        <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/>
                    </div>
                    <div class="col-12">
                       <div class="card-body px-0 pb-0">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>
             </div>
        </div>
        <!-- Card end From Here -->

        <!-- Card Start From Here -->
        <div class="col-lg-4 col-md-6 col-sm-6 mb-4">
            <div class="card p-4">
                <div class="row">
                    <div class="col-6">
                        <img class="card-img-top img-fluid w-lg-75 w-md-50 w-100 text-center" src="https://i.ibb.co/Xyk1kJy/1-1.jpg" alt="Card image cap"/>
                    </div>
                    <div class="col-12">
                       <div class="card-body px-0 pb-0">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>
             </div>
        </div>
        <!-- Card end From Here --> 

    </div>
</div>