vue实现长图垂直居上 vue实现短图垂直居中

实现长图垂直居上和短图垂直居中，我们可以通过使用flex布局和Object-fit属性实现。

1. Vue实现长图垂直居上

步骤一：使用Flex布局

用Flex布局实现垂直居上主要需要定义元素的父级容器为Flex布局，并设置元素的flex-direction属性为column，使元素从上到下排列。在父级容器中设置justify-content为flex-start，让元素显示在容器的顶部。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh; /* 设置容器高度为100%的视口高度，使容器从顶部顶到底部 */
}

步骤二：使用Object-fit属性

使用Object-fit属性可以保持原始图片比例，并使图片填充整个容器，并并使图片垂直居上。

<template>
  <div class="parent">
    <img src="..." alt="..." class="child" />
  </div>
</template>

<style>
.parent {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
}

.child {
  object-fit: cover;
  width: 100%;
  height: auto;
}
</style>

这样，我们就可以实现长图垂直居上的效果了。

Vue实现短图垂直居中

步骤一：使用Flex布局

使用Flex布局实现短图垂直居中与实现长图垂直居上的步骤类似，只是需要将父级容器的justify-content属性设置为center，使元素垂直居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

步骤二：使用Object-fit属性

同样使用Object-fit属性保持原始比例并填满空白区域。

<template>
  <div class="parent">
    <img src="..." alt="..." class="child" />
  </div>
</template>

<style>
.parent {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  height: 100vh;
}

.child {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
</style>

这样我们就可以实现短图垂直居中的效果了。

以上是vue实现长图垂直居上和短图垂直居中的完整攻略，希望可以帮助到你。