Exemple de méthode de centrage vertical des images longues en haut et des images courtes en vue

Cet article présente principalement en détail la disposition élastique de la vue pour obtenir le centrage vertical des images longues sur le dessus, et le centrage vertical des images courtes dans la vue. J'espère qu'il a une certaine valeur de référence. cela peut vous aider.

L'effet approximatif est celui indiqué ci-dessous, seule la direction verticale est prise en compte. Les images longues peuvent être visualisées via la barre de défilement, les images courtes sont centrées et la mise en page est raisonnable

code html (dans la portée de la vue) :

<p class="box" v-for="item in previewImg">
  <img :src="item" alt="" @load="checkHeight($event)">
</p>

code css :

.box{
 height: 100%;//如高度等于网页高度
 overflow: auto;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
}
.swiper-slide.long{
 justify-content: flex-start;
}

code js (dans le cadre de vue, en utilisant jquery) :

methods: {
checkHeight:function (event) {
  var el=$(event.currentTarget);
  el.parent().removeClass('long');
　　//this.CH 为网页高度
  if(el.height()>this.CH){
    el.parent().addClass('long');
  }

}

}

Recommandations associées :

Comment centrer verticalement un div en CSS

Css pour atteindre l'horizontale et centrage vertical des éléments

Quelles sont les deux manières de définir le centrage horizontal et vertical des éléments

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!