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

问题描述

我想在卡片中提供图像的宽度和高度（300px; 300px;）：

<!-- Card Start From Here -->
  <div class="card" style="width: 35rem;">
   <img class="card-img-top" src="/demo/img/1.jpeg" alt="Card image cap" style="width:35rem;height:20rem;"/>
   <div class="card-body">
    <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>
  <!-- Card Start From Here -->

输出缩小：

如果我删除下面的代码行，则图像将很长，但不会缩小：

style="width:35rem;height:20rem;"

我尝试过：

object-fit:cover;(Check all properties like fill,scale-down)

还尝试了一些CSS：

<style>
 .clsAutofit{
   height:300px;
   width:300px;
  }
 .clsImg{
  max-width:100%;
  max-height:100%;
  }
 </style>

 <div class="clsAutofit">
   <img src="/demo/img/1.jpeg" class="clsImg" />
 </div> 
 <!-- This also not working in card -->

我还尝试了一些属性：

<style>
 img.one {
 display: block;
 object-fit: contain;
 max-width:500px;
 max-height:280px;
 width: auto;
 height: auto;
 }

 img.two {
  object-fit: contain;
  width: 535px;;
  height: 535px;
  }
 .Box {
   width: 30%;
   height: 200px;
   border: 5px dashed #f7a239;
 }
 .containerTY {
    width: 60%;
    height: 500px;
 }
 .containerTYZ {
    max-width: 100%;
 }
 .thumbnail {
   width: 500px;
   height: 400px;
  }
 .img4R {
    width: 100%;
    height: auto;
    max-width: 50vw;
  }
 </style>

我尝试了但还没有做到。 任何想法或建议都将受到欢迎。

解决方法

将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>

,

您的方法还可以。问题是，引导程序类属性通常具有!important。

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

然后使用：

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

将图像与类.my-image绑定，清除内嵌CSS样式，然后进行检查。

,

 .clsImg{
  max-width:100%;

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