放圖片的方法, 定位

<img>屬性使用

1 使用 background-image

<div class="header">
  <nav class="nav-container">...</nav>
  <div class="ac-logo"></div>
</div>

.header > .ac-logo {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 40px;
  height: 40px;
  background-image: url(https://media.cakeresume.com/image/upload/s--yvVYN9sa--/c_pad,fl_png8,h_200,w_200/v1548316744/ribjsyna9cm9tm4pkv63.png);
  background-size: cover;
  background-position: center center;
}

viewport 滿版背景圖:
方法1: body

body {
  max-width: 1920px;
  max-height: 1326px;
  background-size: cover;
  /* background-position: center center; 圖被切掉 */
  background-position: 0% 0%;
  background-repeat: no-repeat;
}

方法2: 絕對定位

.carousel {
  width: 100vw;
  height: 100vh;
  position: relative;
  .slide {
    position: absolute;
    inset: 0; /*上下左右都0*/
    opacity: 0; /*active 的才呈現，所以先隱藏*/
    img {
      display: block; /*才能設寬高*/
      width: 100%;
      height: 100%;
      object-fit: cover; /*依比例縮放*/
      object-position: center; /*對準中心*/
    }
  }
}

2 使用 <img src="...">

<div class="title">
    <img src="https://assets-lighthouse.alphacamp.co/uploads/image/file/17990/__.png">
    <h2>Memorizing Game</h2>
</div>

.title {
  width: 100%;
}

.title img {
  max-width: 3em; /*圖片img 3em*/
}

3 使用align-self => 用於 grid or flex 子元素

<div data-index="3" class="card">
    <p>4</p>
    <img src="htt....png" alt="">
    <p>4</p>
</div>

.card {
  margin: 2px;
  flex: 7% 1 1;   /* #cards 52張的排版 */ /* 修改：卡片需要分配剩餘空間 */
  /*每張card分配容器寬度 grow shrink basis*/ /*放大1，縮小1倍比例*/ 
  height: 8vw; /* 依視窗的寬度等比例變化 */ /*等寬高縮放*/
  border: 2px solid #e0e0e0;
  /* 定義一張卡片的內部元件 */
  display: flex;
  flex-direction: column;
  justify-content: space-around; /*between 字會貼邊*/
}
.card img {
  max-width: 30%;
  align-self: center; /*有3個flex-item p img p ,用align-self指定img*/
}

輔助語法:
background-size: cover;
background-position: center center;