Flexbox基礎-處理圖片-跟著KP用21天征服Responsive Layout-W2

對於前端工程師而言，如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。

因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。

圖片被flexbox拉長了

這裡讓我們看個例子:

html:img作為flex-item

<d class="row">
  <p>
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </p> 
    <img src="https://picsum.photos/200/200"> 
</div>

css

.row{
  display:flex;
}

結果:

結果可以看到，圖片被拉長到和文字的高度一樣，而且比例被改變了(圖片的大小是200*200的正方形)。

flex-item的高度伸縮原理

在之前的文章,我們有提到flex-item如何水平伸縮，現在我們就來看看flex-item如何垂直伸縮。

flex-container有個屬性,叫做align-items，這個屬性是在處理flex-item的垂直對齊。而其預設值為stretch ，也就是flex-item都會拉長到一樣的高度(拉到和最高的flex-item一樣高)。

回到例子,如果要讓圖片不要被拉高，有兩個方式。

1.調整align-items

將align-items設定為flex-start,flex-item就會對齊頂部，高度不會拉長到一樣高，而是維持flex-item內容的原始高度。

.row{
  display:flex;
  align-items:flex-start; /*----調整align-items-----*/
}

結果

可以看到,圖片就恢復成正常尺寸與比例了。

2.在圖片外層包div

另一個做法則是用div來包住圖片,這樣圖片就不是flex-item,也就不會被拉長了。

html

<d class="row">
  <div class="col">
  <p>
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </p>
  </div>
 <div class="col"> <!--用div包裹住img--->
    <img src="https://picsum.photos/200/200">
  </div>
</div>

結果

圖片也一樣恢復到原始的大小與比例了。

圖片的起手式

在上面的解法2,我們用div來包裹圖片,圖片就不會有flex-item的效果，也就不會有縮放的能力。

但是現在的網站,基本上都是Responsive。我們會希望圖片都具有伸縮的能力。所以我們會習慣在開頭時，就對所有圖片設置max-width:100%。

img{
max-width:100%
}

設置max-width:100%，可以讓圖片莫忘初衷:

1.具有伸縮性,且不會超過原始的大小。

2.圖片的比例都維持跟原始圖片一樣

結論:

1.flex-item的align-items預設是stretch，會將item都拉到一樣高。

2.在flexbox使用圖片時,可以用div將圖片包住,或是改變align-items。讓圖片不會不自然地拉高。

3.圖片起手式:max-width:100%。給予圖片伸縮的超能力，又讓圖片莫忘初衷(維持遠始比例與不超過原始大小。)