Bootstrap Responsive Image Ratio D'Aspect

Je suis en train de travailler avec un site web de tiers qui me permet de modifier le code pour l'adapter à mes besoins. J'ai une page de produit avec le réactif de colonnes. Administrative, les utilisateurs peuvent télécharger des images pour les produits aux utilisateurs finaux de l'ordre. Je l'ai fixé de sorte que les images sont de répondre ainsi, mais parce que les images des produits ne sont pas tous les mêmes proportions, j'ai quelques éléments qui sont plus grands que d'autres, faisant de la page laisser un espace dans la colonne vide. Je veux que les images de rester réactif et de maintenir leur ratio d'aspect, mais qui ont les conteneurs ils sont tous de même hauteur et sensible de la largeur. Changement de max-height et min-height donne la même réponse que le réglage de la hauteur. Comment puis-je le faire tout en gardant la largeur correcte?

HTML:

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

InformationsquelleAutor Natalie | 2016-01-29
  1. 8

    La meilleure solution serait d'obliger les utilisateurs à télécharger une image d'une certaine hauteur/largeur, mais à défaut, vous pouvez simplement mettre le responsive images à l'intérieur d'un div qui a une taille fixe et c'est le css overflow propriété a la valeur cachée.

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

    Maintenant, l'image est totalement responsive, mais toutes les parties qui sont plus gros que son conteneur seront écrêtés.

    • Je vous remercie beaucoup. J'ai essayé de définir que dans tous les mauvais endroits, mais ne le savais pas, j'ai dû ajouter un nouveau div. A parfaitement fonctionné.
    InformationsquelleAutor Scott Marcus
  2. 1

    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/

    InformationsquelleAutor huypham