Bootstrap响应图像纵横比

Question

我正在与第三方网站合作,允许我修改代码以满足我的需求.我有一个包含响应列的产品页面.管理用户可以上载最终用户可以订购的产品的图像.我设置它以便图像也是响应式的,但由于产品图像的长宽比并不相同,我有一些比其他项目更高的项目,使页面空白留空.我希望图像保持响应并保持其纵横比,但是它们所有的容器都具有相同的高度和响应宽度.更改最大高度和最小高度只会给出与设置高度相同的响应.如何在保持宽度正确的同时做到这一点？

<div class="col-xs-12 text-center">
        <div class="well text-center">
        <href="product/{{LineItem.Product.InteropID}}">
            <figure ng-show="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl" >
                <img class="img-responsive" style="max-height: 200px; min-height: 200px; width: auto; margin: auto;" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>
            </figure>
            <div class="empty" ng-hide="LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl">
                <span class="fa empty"><i class="fa fa-camera"></i></span>
            </div>
        </a>
        </div>
       </div>

Answer 1

最好的解决方案是强制用户上传一定高度/宽度的图像,但除此之外,您可以将响应图像放在具有固定大小且其css溢出属性设置为隐藏的div内.

<figure ng-show="LineItem.Variant.SmallImageUrl ||  LineItem.Product.SmallImageUrl" >

    <div style="height:200px; width:200px;overflow:hidden;">

      <img class="img-responsive" ng-src="{{LineItem.Variant.SmallImageUrl || LineItem.Product.SmallImageUrl}}"/>

    </div>

</figure>

现在,图像完全响应,但它的任何大于其容器的部分都将被剪裁.