今日のYWT

やったこと

Travelog

カードのデザイン

• カルーセルで、画像が勝手にスライドするのを止める
• カルーセルの画像を、Articleに紐付いているphotosにする
• 画像のheightによって、カルーセルのフィールドが伸びたり縮んだりするのを防ぐ

MTG

• 上のカルーセルのフィールドが伸びたり縮んだりする問題を解決
• 画像のドラッグ＆ドロップでのアップロードとプレビューについて参考記事や参考になりそうなコードを教えてもらった
• 独自ドメインのとり方、HTTPS化
• AWSでネットワーク構築するときどんな風にすすめるか、実際の例も見せてもらった

わかったこと

カルーセル

<style>
  .carousel-item img {
    width: 250px;
    height: 250px;
    object-fit: contain;
}
</style>

object-fitを使うことで、カルーセルの表示するフィールドの大きさを指定することができる
1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー

MTGででてきた参考記事たち

Document: drag イベント

AjaxでバイナリのJPEG画像データを受け取って表示する

次やること

• デザインを進める