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/

Bootstrap响应图像纵横比

2 个答案: