Comment faire pour obtenir plusieurs images à redimensionner automatiquement et de rester centré à l'intérieur d'un div

J'essaie d'obtenir les multiples université logo images dans une rangée à l'échelle vers le bas comme la largeur du navigateur est plus petit et pas de débordement de son conteneur div, tout comme je le fais avec le bleuâtre image ci-dessus. L'image des échelles dans sa div en appliquant max largeur et hauteur de 100%. Mais les images de logo n'évoluent pas de la même manière et de dépassement de la div.

Ici est un exemple vivant: http://feroze.org/new-education/ - essayez de redimensionner et de voir ce que je veux dire

Voici le css pour les logos div conteneur gris bar

#partners
  height 105px
  background-color #eee
  white-space nowrap
  width 100%

et voici le css appliquée à la logo images elles-mêmes

.logo-image
  vertical-align middle
  padding 13px
  max-width 100%
  display inline

Comme vous pouvez le voir j'ai aligné verticalement dans la barre grise. Mais comme la barre raccourcit je veux les images de rester à l'intérieur de la div et de les redimensionner selon la div conteneur.

Toute aide serait grandement appréciée! Grâce

Comment faire pour obtenir plusieurs images à redimensionner automatiquement et de rester centré à l'intérieur d'un div

l'esprit de partage de l'URL du site web ou la création d'un Violon?

OriginalL'auteur Nearpoint | 2013-11-10

  1. 2

    Il y a trois façons de le faire:

    Tout d'abord, vous pouvez définir le max-width à 100%/nombre d'images (dans ce cas-six).
    box-sizing est un nouvel attribut CSS qui contient le rembourrage à l'intérieur de la largeur.

    De sorte que vous pouvez définir le rembourrage pour tout ce que vous voulez, mais si vous avez des box-sizing ensemble de border-box et codé en dur largeur, la largeur ne changera jamais (sauf en cas de débordement, bien sûr).

    box-sizing: border-box;
max-width: 16%;

    Deuxièmement, vous pouvez utiliser la nouvelle fonction CSS calc(). Nous soustraire 26px en raison de la 13px de remplissage sur chaque côté.

    max-width: calc(100% / 6 - 26px);

    Enfin, vous pouvez utiliser calc() et box-sizing, la prévention de la nécessité de soustraire 26px.

    box-sizing: border-box;
max-width: calc(100% / 6);

    OriginalL'auteur sheng