vueで長い画像を上に、短い画像を縦方向に中央揃えする方法の例

この記事では主に、vue の伸縮性のあるレイアウトがどのようにして長い画像を上部に配置するかを詳しく紹介し、vue による短い画像の垂直方向の配置について説明します。興味のある方は参考にしていただければ幸いです。あなた。

垂直方向のみを考慮したおおよその効果は以下の通りです。長い画像はスクロール バーから表示でき、短い画像は中央揃えの効果と適切なレイアウトを持っています。

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

js コード (vue スコープ内、jquery の使用):

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

関連推奨事項:

CSS で div を垂直方向に中央揃えにする方法

CSS で要素の水平方向と垂直方向の中央揃えを実現する

要素の水平方向と垂直方向の中央揃えを設定する 2 つの方法は何ですか?

以上がvueで長い画像を上に、短い画像を縦方向に中央揃えする方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。