web-dev-qa-db-fra.com

Mettre à l'échelle CSS plusieurs images pour s'adapter au format d'affichage

Je crée une galerie où je veux lister toutes les images d'un album sur une seule page: style Big Picture :

Contrairement à Big Picture, je veux que les images soient proportionnellement mises à l'échelle pour s'adapter à la largeur du conteneur div (.section-images, qui est défini sur margin: auto 2em; donc sa largeur est la largeur du navigateur de l'utilisateur moins 2*2em) autant que possible sans les agrandir à plus de 90% de la hauteur de la fenêtre.

Comme vous l'imaginez, un 400x600 une photo portrait mise à l'échelle pour s'adapter à la largeur serait si longue que l'utilisateur ne verrait pas l'image entière à l'écran, c'est pourquoi je dois limiter la mise à l'échelle de la largeur pour ne pas dépasser 90% de la hauteur.

<section class="section-images">
    <div class="image-box">
        <div class="image-large">
            <a href="#"><img foo1></a>
        </div>
        <div class="image-description">
          blabla1
        </div>
        ... MORE IMAGES WITH DESCRIPTONS ...
    </div>
    etc
</section>

Sous chaque image, j'ai le .image-description, la hauteur de ceci variera.

Ce qui est important, c'est qu'à tout moment une seule image (donc .image-large) doit tenir dans la fenêtre, qu'il s'agisse d'un paysage ou d'un portrait.

Je voudrais le faire en utilisant uniquement CSS si possible, et uniquement javascript si CSS n'est pas possible.

cssimagescaleaspect-ratio
17
MindOverflow

Solution: (J'ai enlevé la plupart de vos conteneurs pour le rendre simple à comprendre et à utiliser)

html,
body,
.section-images {
  height: 100%;
  margin: 0;
}
.section-images {
  margin: auto 2em;
  text-align: center;
}
img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  margin: 20px auto;
}
<section class="section-images">
  <a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
  <a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a>
  <div class="image-description">blabla2</div>
  <a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
</section>

Explication:

Cette solution est basée sur le fait que les tailles de pourcentages (largeur et hauteur) sont relatives à la taille de l'élément parent.

Considérant .section-images est un enfant direct de <body> commencez par définir:

html, body, .section-images {
    width:100%;
    height:100%;
    margin:0;
}

Ainsi, le parent direct des images est égal à taille de la fenêtre d'affichage.

Ensuite, vous pouvez facilement dimensionner vos images en utilisant:

img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90%;
}

Les images ne dépasseront jamais 100% de largeur et 90% de hauteur de la fenêtre d'affichage tout en conservant leur rapport hauteur/largeur. Et ils resteront dans le flux du document.

28
web-tiki

Vous pouvez également utiliser des unités de fenêtre pour ce faire sans modifier html, body pour IE9 +.

img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90vh;
}
10
DonutReply

Réglez la hauteur du conteneur section-images explicitement, et définissez son overflow sur hidden.

0
Nick Salloum