如何在Div中拟合所有像素大小的图像

Question

我正在构建一个网络应用程序，我想在其中显示像电子商务网站一样显示产品。随机尺寸的图像必须适合特定盒子。我已经尝试关注代码，但是如果高度大于宽度，则会扭曲图像，但如果是副主席，则看起来很完美。

。

<div class="panel panel-default text-center">
                <div class="panel-heading" style="padding:2px;">
                    <a href="#" style=" text-decoration: none;"><img  src="images/abc.jpg" style="width:100%;height:220px;" /></a></a>
                </div>
                <div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
                    <a href="#" class="pull-left" style=" text-decoration: none;"><h5 style="margin-bottom:0px;" ><b>Product One</b></h5>
                    <p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p></a>                       
                </div>

            </div>

Answer 1

在您的样式中添加另一个属性：

    <div class="panel-heading" style="padding:2px;">
                <a href="#" style=" text-decoration: none;"><img  src="images/abc.jpg" style="width:100%;height:auto;max-width:100px;" /></a></a>
    </div>

现在可以使用吗？

Answer 2

以下是评论中几乎没有修改的答案。

<div class="panel panel-default text-center">
    <div class="panel-heading" style="padding:2px;overflow:hidden;">
        <a href="#" style=" text-decoration: none;"><img  src="images/abc.jpg" style="max-width: 100%; height: 100%;" /></a></a>
    </div>
    <div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
        <a href="#" class="pull-left" style=" text-decoration: none;"><h5 style="margin-bottom:0px;" ><b>Product One</b></h5>
            <p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p></a>                       
        </div>
    </div>
</div>

Answer 3

如果您不关心Edge/IE，则可以在下面的示例中使用object-fit：

<div class="panel panel-default text-center">
  <div class="panel-heading" style="padding:2px;height:200px;">
    <a href="#" style=" text-decoration: none;"><img src="http://placehold.it/1000x1000" style="width:100%;height:100%;object-fit:cover;" /></a>
  </div>
  <div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
    <a href="#" class="pull-left" style=" text-decoration: none;">
      <h5 style="margin-bottom:0px;"><b>Product One</b></h5>
      <p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p>
    </a>
  </div>

如果您 do 护理和如果您可以使用background-image，我建议您在下面：

div.panel-heading {
  height: 200px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url('http://placehold.it/1000x1000');
}

<div class="panel panel-default text-center">
  <div class="panel-heading" style="padding:2px;height:200px;">
    <a href="#" style=" text-decoration: none;"></a>
  </div>
  <div class="panel-body w3-card" style="padding-top:0px;background-color:#ebebeb;">
    <a href="#" class="pull-left" style=" text-decoration: none;">
      <h5 style="margin-bottom:0px;"><b>Product One</b></h5>
      <p class="pull-left" style="margin-top:0px;color:#6e6e6e;margin-bottom:0px;"><i class="fa fa-inr"></i> 10,000/-</p>
    </a>
  </div>