AI(ChatGPT)を使って半自動で月5万稼ぐ?
実際にやってみて結果・・ >>

【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>

どうですか?

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

以上です

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる