Example of the method of vertically centering long images on top and short images in vue

This article mainly introduces in detail the elastic layout of vue to realize the vertical centering of long images on the top, and the vertical centering of short images in vue. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The approximate effect is as shown below, only the vertical direction is considered. Long pictures can be viewed through the scroll bar, short pictures have a centered effect, and the layout is reasonable

html code (within vue scope):

<p class="box" v-for="item in previewImg">
  <img src="/static/imghwm/default1.png"  data-src="item"  class="lazy"  : 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 (within vue scope, using jquery):

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

}

}

Related recommendations:

How to vertically center a div in css

css to achieve horizontal and vertical centering of elements

What are the two ways to set the horizontal and vertical centering of elements

The above is the detailed content of Example of the method of vertically centering long images on top and short images in vue. For more information, please follow other related articles on the PHP Chinese website!