【Vue/コピペだけ】CSSを駆使してイメージをお洒落に並べる方法をさらっと解説

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

イメージをお洒落に並べる方法

説明は抜きにしてコードを下に貼ってあるのでどんどんコピペして

自分のプロジェクトに合った修正を加えてみてください

一応先に完成イメージです（モバイルに合わせてコーディングしてます）

template

<template>
  <b-container>
    <b-row>
      <b-col>
        <div v-for="(item, i) in items" class="images" :key="i">
          <b-img thumbnail fluid :src="item.imageUrl"></b-img>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

script

<script>
export default {
  data () {
    return {
      items: [
        { imageUrl: require('@/assets/images/1.png') },
        { imageUrl: require('@/assets/images/2.png') },
        { imageUrl: require('@/assets/images/3.png') },
        { imageUrl: require('@/assets/images/4.png') },
        { imageUrl: require('@/assets/images/5.png') },
        { imageUrl: require('@/assets/images/6.png') },
        { imageUrl: require('@/assets/images/7.png') },
        { imageUrl: require('@/assets/images/8.png') },
        { imageUrl: require('@/assets/images/9.png') },
        { imageUrl: require('@/assets/images/10.png') }
      ]
    }
  }
}
</script>

style

<style scoped>
.col {
  height: 100%;
}
.images {
  margin: 0 auto;
  width: 50%;
  float: left;
  height: 150px;
  position: relative;
}

.col img {
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
}

.col img:hover {
  opacity: .8;
}

</style>

どうですか？

そこそこお洒落に並べることができたかと思います

以上です

参考