javascript - 如何将所有像素大小的图像放入一个 div 中？

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>

现在可以了吗？