Comment gérer une image à l'intérieur de bootstrap de la colonne?

J'ai eu bootstrap col-md-1 qui contient une image à l'intérieur. En outre, cette colonne est enveloppé par le contenu div avec des remplissages.

Le problème, je ne suis pas d'accord avec, c'est que cette image est assez petite. Je voudrais qu'il soit à la taille, à moins que celui d'origine a,

Comment gérer une image à l'intérieur de bootstrap de la colonne?

mais il doit être réactif.

Comment puis-je faire cela? Merci à l'avance!

Mon Codepen

HTML

<div class="content">
  <div class="row">
    <div class="col-md-11 first-column"></div>
    <div class="col-md-1 back-to-blog">
      <a href="/">
        <img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
      </a>
    </div>
    </div>
  </div>
</div>

CSS

.content {
  padding: 0 35px;
}

.first-column {
  border: 1px solid;
  height: 100px;
}
  • Essayez un 10-2 mise en page en colonnes au lieu de 11-1, il semble beaucoup mieux
  • C'est peut-être, mais il y a beaucoup d'espace à gauche
InformationsquelleAutor Alexander Shmatko | 2016-02-04
  1. 9

    Un de la "couverture" des styles qui BootStrap navires est: est-ce

    img {
    max-width: 100%;
}

    Essentiellement, cela signifie que les images ne vont plus loin que leur parent conteneurs /éléments. Donc, si votre col-md-1 a une largeur de 97,5 px (en supposant que vous êtes en utilisant une normale 1170px conteneur?), votre image ne sera pas plus grand que 97.5 px sur les fenêtres > 992px.

    Essayez d'expérimenter avec différentes tailles de colonnes:

    <div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
    <a href="/">
      <img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
    </a>
</div>

    Ou, pour les grandes fenêtres, essayer d'ajouter une autre classe à votre emballage conteneur et remplace BootStrap du conteneur natif de classe:

    <div class="container container-custom">

    Puis le style est comme suit:

    @media (min-width: 1420px) {
    .container.container-custom {
        width: 1390px
    }
}

    Cela permettra d'assurer que votre largeurs de colonne rester proportionné à votre conteneur de la taille (ils sont en pourcentage en fonction, après tout) et surtout, vous n'êtes pas écraser BootStrap!

    Vous remarquerez également que j'ai enveloppé la classe ci-dessus dans une requête de média. Il en est ainsi fenêtres > 1420px ont la 1390px conteneur avec un espacement de chaque côté (en raison du conteneur margin-left: auto et margin-right: auto qui centre dans la fenêtre d'affichage).

    InformationsquelleAutor David Wilkinson