Beispiel für die Methode zur vertikalen Zentrierung langer Bilder oben und kurzer Bilder in Vue

Dieser Artikel stellt hauptsächlich das elastische Layout von Vue vor, um die vertikale Zentrierung von kurzen Bildern oben zu erreichen. Ich hoffe, dass interessierte Freunde darauf verweisen können es kann jedem helfen.

Der ungefähre Effekt ist wie unten gezeigt, nur die vertikale Richtung wird berücksichtigt. Lange Bilder können über die Bildlaufleiste angezeigt werden, kurze Bilder werden zentriert und das Layout ist angemessen

HTML-Code (innerhalb des Vue-Bereichs):

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

CSS-Code:

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

JS-Code (im Vue-Bereich, mit JQuery):

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

}

}

Verwandte Empfehlungen:

Wie man ein Div in CSS vertikal zentriert

CSS, um horizontal zu erreichen und vertikale Zentrierung von Elementen

Welche zwei Möglichkeiten gibt es, die horizontale und vertikale Zentrierung von Elementen festzulegen?

Das obige ist der detaillierte Inhalt vonBeispiel für die Methode zur vertikalen Zentrierung langer Bilder oben und kurzer Bilder in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!