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

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

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

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

Answer 2

HTML

<div class="img-wrap ratio-4-3">
    <div class="img-content">
        <img src="https://picsum.photos/200" />
    </div>
</div>

SCSS

.img-wrap{
    position: relative;
    .img-content{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        > img{
            max-width: 100%;
            max-height: 100%;
            width: auto;
        }
    }
    &.ratio-4-3{
        padding-top: 75%;
    }
    &.ratio-16-9{
        padding-top: 56.25%;
    }
    &.ratio-3-2{
        padding-top: 66.66%;
    }
    &.ratio-8-5{
        padding-top: 62.5%;
    }
}

https://jsfiddle.net/huypn/pcwudrmc/25813/

Answer 3

Bootstrap 5.0 现在包含比率作为内置功能。

这是他们在网站上给出的示例（https://getbootstrap.com/docs/5.0/helpers/ratio/）：

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>