web-dev-qa-db-fra.com

Forcer bootstrap l'image réactive à être carrée

Les images sont créées en boucle avec:

<div id="row">
    <div class="col-sm-6">
        <div id="row">
        <?php
        foreach ($products as $product)
        {
        ?>
            <div class="col-sm-6">
                <a href="/admin/product/"   class="thumbnail">
                <div class="caption">
                    title<br>
                    10  x viewed
                </div>
                <img src="/assets/img/product/<?php echo $product['img'] ?>" class="img img-responsive full-width" />
                </a>
            </div>
        <?php
        }
        ?>
        </div>
    </div>
</div>

Les images sont de tailles différentes certaines sont supérieures à la largeur, et certaines sont plus larges que la hauteur. comment puis-je forcer toutes les images à avoir le même que la hauteur tout en étant réactif. C'est ok pour eux d'avoir widh: 100%, mais je ne peux pas utiliser height: auto, le ratio restera alors. Que dois-je faire pour rendre mes images au carré alors qu'elles sont réactives et je ne connais pas le%.

Example

Exemple, la chemise verte n'est pas aussi haute que sa largeur

Je veux le faire sans jquery donc CSS uniquement!

csstwitter-bootstrapresponsive-design
22
Sven van den Boogaart

Tu peux le faire :

  1. envelopper l'image dans un conteneur avec padding-bottom:100%; overflow:hidden; position:relative
  2. positionnez l'image absolument à l'intérieur de ce conteneur.

VIOLON

Explication:

Le rembourrage haut/bas (comme la marge haut/bas) est calculé en fonction de la largeur de l'élément parent. Comme le div .image A la même largeur que son parent, le réglage padding-bottom:100%; Lui donne la même hauteur comme sa largeur, il est donc carré (son contenu doit être absolument positionné ou flotté pour ne pas changer la taille du parent).

HTML:

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

CSS:

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}
57
web-tiki

Voici la meilleure solution pour toutes les tailles d'images http://jsfiddle.net/oboshto/p9L2q/53/

HTML pareil:

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

Nouveau CSS:

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
}
22
oboshto

Vous pouvez envelopper chaque image dans un div, puis définir le débordement de la div sur masqué. Tant que le div est carré, votre image apparaîtra coupée. Le div peut également être réactif. poste similaire

1
miriye