Question

我正在构建一个Web应用程序，我希望在电子商务网站中显示产品。随机尺寸的图像必须适合特定的盒子。我尝试过跟随代码，但如果高度超过宽度，它会扭曲图像，但如果反之亦然，则看起来很完美。

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

如果您执行关注， ，您可以使用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>

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

3 个答案: